Origin null is not allowed by Access-Control-Allow-Origin error for request made by application running from a file URL

Question

I m developing a page that pulls images from Flickr and Panoramio via jQuery s AJAX support   The Flickr side is working fine  but when I try to   get url  callback  from Panoramio  I see an error in Chrome s console      XMLHttpRequest cannot load http   www panoramio com wapi data get photos v 1 amp key dummykey amp tag test amp offset 0 amp length 20 amp callback processImages amp minx -30 amp miny 0 amp maxx 0 amp maxy 150  Origin null is not allowed by Access-Control-Allow-Origin    If I query that URL from a browser directly it works fine   What is going on  and can I get around this   Am I composing my query incorrectly  or is this something that Panoramio does to hinder what I m trying to do   Google didn t turn up any useful matches on the error message   EDIT  Here s some sample code that shows the problem       ready function        var url    http   www panoramio com wapi data get photos v 1 amp key dummykey amp tag test amp offset 0 amp length 20 amp callback processImages amp minx -30 amp miny 0 amp maxx 0 amp maxy 150        get url  function  jsonp        var processImages   function  data          alert  ok                eval jsonp               You can run the example online   EDIT 2  Thanks to Darin for his help with this   THE ABOVE CODE IS WRONG   Use this instead       ready function        var url    http   www panoramio com wapi data get photos v 1 amp key dummykey amp tag test amp offset 0 amp length 20 amp minx -30 amp miny 0 amp maxx 0 amp maxy 150 amp callback          get url  function  data           can use  data  in here

User · Answer

Folks   I ran into a similar issue  But using Fiddler  I was able to get at the issue  The problem is that the client URL that is configured in the CORS implementation on the Web API side must not have a trailing forward-slash  After submitting your request via Google Chrome and inspect the TextView tab of the Headers section of Fiddler  the error message states something like this     The specified policy origin your client url    is invalid  It cannot end with a forward slash    This is real quirky because it worked without any issues on Internet Explorer  but gave me a headache when testing using Google Chrome    I removed the forward-slash in the CORS code and recompiled the Web API  and now the API is accessible via Chrome and Internet Explorer without any issues  Please give this a shot   Thanks  Andy

User · Answer

Not all servers support jsonp  It requires the server to set the callback function in it s results  I use this to get json responses from sites that return pure json but don t support jsonp   function AjaxFeed         return   ajax           url              http   somesite com somejsonfile php           data             something  true           dataType         jsonp               Very important            contentType      application json              function GetData         AjaxFeed           Everything worked okay  Hooray         done function data           return data                 Okay jQuery is stupid manually fix things         fail function jqXHR                Build HTML and update            var data   jQuery parseJSON jqXHR responseText            return data

User · Answer

It s the same origin policy  you have to use a JSON-P interface or a proxy running on the same host

User · Answer

There is a small problem in the solution posted by CodeGroover above   where if you change a file  you ll have to restart the server to actually use the updated file  at least  in my case    So searching a bit  I found this one To use   sudo npm -g install simple-http-server   to install nserver   to use   And then it will serve at http   localhost 8000

User · Answer

You need to maybe add a HEADER in your called script  here is what I had to do in PHP   header  Access-Control-Allow-Origin         More details in Cross domain AJAX ou services WEB  in French

User · Answer

I also got the same error in Chrome  I didn t test other browers   It was due to the fact that I was navigating on domain com instead of www domain com  A bit strange  but I could solve the problem by adding the following lines to  htaccess  It redirects domain com to www domain com and the problem was solved  I am a lazy web visitor so I almost never type the www but apparently in some cases it is required   RewriteEngine on RewriteCond   HTTP HOST   domain  com   NC  RewriteRule        http   www domain com  1  R 301 L

User · Answer

For a simple HTML project   cd project python -m SimpleHTTPServer 8000   Then browse your file

User · Answer

As final note the Mozilla documentation explicitly says that     The above example would fail if the header was wildcarded as     Access-Control-Allow-Origin       Since the Access-Control-Allow-Origin explicitly mentions http   foo example    the credential-cognizant content is returned to the invoking web   content    As consequence is a not simply a bad practice to use      Simply does not work

User · Answer

For the record  as far as I can tell  you had two problems    You weren t passing a  jsonp  type specifier to your   get  so it was using an ordinary XMLHttpRequest  However  your browser supported CORS  Cross-Origin Resource Sharing  to allow cross-domain XMLHttpRequest if the server OKed it  That s where the Access-Control-Allow-Origin header came in  I believe you mentioned 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     which  if you were reaching Flickr via   get  they must have been doing  while the other was to echo back the contents of the Origin header  However  file    URLs produce a null Origin which can t be authorized via echo-back    The first was solved in a roundabout way by Darin s suggestion to use   getJSON  It does a little magic to change the request type from its default of  json  to  jsonp  if it sees the substring callback   in the URL   That solved the second by no longer trying to perform a CORS request from a file    URL   To clarify for other people  here are the simple troubleshooting instructions    If you re trying to use JSONP  make sure one of the following is the case    You re using   get and set dataType to jsonp  You re using   getJSON and included callback   in the URL   If you re trying to do a cross-domain XMLHttpRequest via CORS      Make sure you re testing via http     Scripts running via file    have limited support for CORS  Make sure the browser actually supports CORS   Opera and Internet Explorer are late to the party

User · Answer

In my case  same code worked fine on Firefox  but not on Google Chrome  Google Chrome s JavaScript console said   XMLHttpRequest cannot load http   www xyz com getZipInfo php zip 11234   Origin http   xyz com is not allowed by Access-Control-Allow-Origin  Refused to get unsafe header  X-JSON    I had to drop the www part of the Ajax URL for it to match correctly with the origin URL and it worked fine then

User · Answer

For PHP - this Work for me on Chrome  safari and firefox  https   w3c github io webappsec-cors-for-developers  avoid-returning-access-control-allow-origin-null  header  Access-Control-Allow-Origin  null      using axios call php live services with file

User · Answer

As long as the requested server supports the JSON data format  use the JSONP  JSON Padding  interface  It allows you to make external domain requests without proxy servers or fancy header stuff

User · Answer

We managed it via the http conf file  edited and then restarted the HTTP service     lt Directory   home the directory where your serverside pages is  gt      Header set Access-Control-Allow-Origin         AllowOverride all     Order allow deny     Allow from all  lt  Directory gt    In the Header set Access-Control-Allow-Origin      you can put a precise URL

User · Answer

Make sure you are using the latest version of JQuery  We were facing this error for JQuery 1 10 2 and the error got resolved after using JQuery 1 11 1

User · Answer

Works for me on Google Chrome v5 0 375 127  I get the alert      get  http   www panoramio com wapi data get photos v 1 amp key dummykey amp tag test amp offset 0 amp length 20 amp callback   amp minx -30 amp miny 0 amp maxx 0 amp maxy 150   function json        alert json photos 1  photoUrl         Also I would recommend you using the   getJSON   method instead as the previous doesn t work on IE8  at least on my machine      getJSON  http   www panoramio com wapi data get photos v 1 amp key dummykey amp tag test amp offset 0 amp length 20 amp callback   amp minx -30 amp miny 0 amp maxx 0 amp maxy 150    function json        alert json photos 1  photoUrl         You may try it online from here     UPDATE   Now that you have shown your code I can see the problem with it  You are having both an anonymous function and inline function but both will be called processImages  That s how jQuery s JSONP support works  Notice how I am defining the callback   so that you can use an anonymous function  You may read more about it in the documentation   Another remark is that you shouldn t call eval  The parameter passed to your anonymous function will already be parsed into JSON by jQuery

User · Answer

If you are doing local testing or calling the file from something like file    then you need to disable browser security   On MAC  open -a Google  Chrome --args --disable-web-security

User · Answer

I use Apache server  so I ve used mod proxy module  Enable modules   LoadModule proxy module modules mod proxy so LoadModule proxy http module modules mod proxy http so   Then add   ProxyPass  your-proxy-url  http   service-url serviceport    Finally  pass proxy-url to your script

[javascript] “Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL

Examples related to javascript

Examples related to jquery

Examples related to xmlhttprequest

Examples related to cors

Examples related to jsonp