[Solved-4 Solutions] XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
Error Description:
- If we develop a page that pulls images from Flickr and Panoramio via jQuery's AJAX support, flickr is working fine, but when we try to
$.get(url, callback)from Panoramio, we see an error in Chrome's console:
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
Solution 1:
- We have two problems:
- We weren't passing a "jsonp" type specifier to the
$.get, so it was using an ordinary XMLHttpRequest. However, the browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where theAccess-Control-Allow-Originheader came in. - You were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send
Access-Control-Allow-Origin: *while the other was to echo back the contents of theOriginheader. However,file://URLs produce a nullOriginwhich can't be authorized via echo-back.
- The first can be solved by changing the request type from its default of "json" to "jsonp" if it sees the substring
callback=?in the URL. - We can solve the second by no longer trying to perform a CORS request from a
file://URL.
Solution 2:
- We may need to add a HEADER in your called script. In PHP:
header('Access-Control-Allow-Origin: *');
click below button to copy the code. By - JavaScript tutorial - team
Solution 3:
- For a simple HTML project:
cd project
python -m SimpleHTTPServer 8000
click below button to copy the code. By - JavaScript tutorial - team
- Then browse the file.
Solution 4:
- We can solve it via the
http.conffile (edit and then restart the HTTP service):
<Directory "/home/the directory_where_your_serverside_pages_is">
Header set Access-Control-Allow-Origin "*"
AllowOverride all
Order allow,deny
Allow from all
</Directory>
click below button to copy the code. By - JavaScript tutorial - team
- In the
Header set Access-Control-Allow-Origin "*", we can put a precise URL.