Origin null is not allowed by Access-Control-Allow-Origin
Origin null
is the local file system, so that suggests that you're loading the HTML page that does the load
call via a file:///
URL (e.g., just double-clicking it in a local file browser or similar).
Most browsers apply the Same Origin Policy to local files by disallowing even loading files from the same directory as the document. (It used to be that Firefox allowed the same directory and subdirectories, but not any longer.
Basically, using ajax with local resources doesn't work.
If you're just testing something locally that you'll really be deploying to the web, rather than use local files, install a simple web server and test via http://
URLs instead. That gives you a much more accurate security picture. Your IDE may well have some kind of server built in (directly or via an extension) that lets you just hit "run" in the IDE and have the server fired up and serving the file.
“Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
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 theAccess-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 theOrigin
header. However,file://
URLs produce a nullOrigin
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 setdataType
tojsonp
. - You're using
$.getJSON
and includedcallback=?
in the URL.
- You're using
- If you're trying to do a cross-domain XMLHttpRequest via CORS...
- Make sure you're testing via
http://
. Scripts running viafile://
have limited support for CORS. - Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)
- Make sure you're testing via
Error: Origin null is not allowed by Access-Control-Allow-Origin when loading an XML file with JQuery's ajax method
You're testing this in Chrome? What's basically happening is because you're loading the file from your filesystem instead of from a server, Chrome is setting your origin to null
even though the resource you're requesting is local to you. If you were to do this from an HTTP server such as Apache, I think it would work just fine.
Origin null is not allowed by Access-Control-Allow-Origin
Read a little about Same Origin Policy to understand your main problem better. Ajax, localhost and Chrome/Opera don't go well together. This related question is even better.
Your second problem is due to the Ajax call (somewhere in your API) which doesn't return an html
response due to the first error.
Instead of explaining the issue (which is very well explained in the links above), I'll provide a solution. Since you're running on Chrome, there's an workaround for that. Start chrome with this option:
--allow-file-access-from-files
(workaround which I shamelessly borrowed from Pointy)
You could also try running it on Firefox, or hosting it temporarily. :)
P.S. If you plan on doing serious development from your local machine, you may consider installing Apache to serve and test content through http://localhost
, thus lifting the file:///
restrictions.
Here are some excellent tools that come with Apache and PHP pre-configured for development:
- For Windows: EasyPHP, WAMP.
- Cross-platform: XAMPP, BitNami.
Chrome Origin null is not allowed by Access-Control-Allow-Origin
Origin null is not allowed by Access-Control-Allow-Origin
means that you are trying to perform Ajax on a local file. This is forbidden for security reasons. Even if this was not the case, your PHP wouldn't run because PHP is supported by web servers, not web browsers.
You have a web server installed. You have to request your pages through the server, rather than accessing them directly from your file system.
Use a URL starting with http://localhost/
You will need to move your files so that they are under the server's DocumentRoot
(or reconfigure the server so that it can access them from their present location).
Related Topics
Parsing a String to a Date in JavaScript
Remove Duplicate Values from Js Array
"Cross Origin Requests Are Only Supported For Http." Error When Loading a Local File
What Is the !! (Not Not) Operator in JavaScript
What's the Meaning of "=≫" (An Arrow Formed from Equals & Greater Than) in JavaScript
How to Attach Events to Dynamic HTML Elements With Jquery
What Is Event Bubbling and Capturing
Google Maps Js API V3 - Simple Multiple Marker Example
Use of 'Prototype' Vs. 'This' in JavaScript
Safely Turning a Json String into an Object
Methods in Es6 Objects: Using Arrow Functions
When Should I Use a Return Statement in Es6 Arrow Functions
How to Check That a Number Is Nan in JavaScript
How to Use JavaScript Variables in Jquery Selectors
Reactjs Component Names Must Begin With Capital Letters
Best Way to Manage Chat Channels in Firebase
Can You Bind 'This' in an Arrow Function
How May I Reference the Script Tag That Loaded the Currently-Executing Script