Chrome 27.0.1
This could keep you busy for hours. When trying to debug an error in the XHR (AJAX) requests, the status of the request is returned as simply canceled, without a valid HTTP Header. Very Useful.
This unusual error is almost always caused by a violation of the Same Origin Policy.
Basically, the policy (which also applies to AJAX) permits scripts running on pages originating from the same site, made up of the URI, host name and port address combination, to access other scripts and resources on the same site. However, access to most methods and properties across pages on different sites outside the domain are not allowed. Also, protocol requests may be affected when the request switches the protocol from it’s origin (http vs https).
If you want to read the whole thing on Wikipedia; here you go.
Consider the following table:
1 2 3 4 5 6 7 8 | httpː//www.example.com/dir/page2.html Success Same protocol and host httpː//www.example.com/dir2/other.html Success Same protocol and host httpː//www.example.com:81/dir/other.html Failure Same protocol and host but different port https://www.example.com/dir/other.html Failure Different protocol http://en.example.com/dir/other.html Failure Different host http://example.com/dir/other.html Failure Different host (exact match required) http://v2.www.example.com/dir/other.html Failure Different host (exact match required) httpː//www.example.com:80/dir/other.html Don't use Port explicit. Depends on implementation in browser. |
Some of the FAILURE results are surprising, and might seem to be illogical to the developer.
Some Tips
Wherever possible, try NOT to define the protocol explicitly when making the request. The following two requests are essentially the same, except that line 2 does not specify the protocol and the browser is left to determine what it should be.
1 2 | http://www.google.com/ //www.google.com/ |
That’s very useful if the page is viewable through both secure and non-secure connections. And especially if we don’t know which one will be used all the time. You need to check browser support with this one, but it’s widely accepted now.
Keep in mind that iframes may come in useful and there are other solutions for this problem which are best explained by the professionals:
Hopefully this article will prove useful when debugging your AJAX woes. Please comment and share your own solutions and tips.
Thanks for reading.