How to Fix the 'Origin null is not allowed by Access-Control-Allow-Origin' Error from File:// URLs?

Resolving "Origin null is not allowed by Access-Control-Allow-Origin" Error for Requests Made from File:// URLs

The error "Origin null is not allowed by Access-Control-Allow-Origin" occurs when a browser restricts cross-origin requests made from files stored locally (file:// URLs). In this scenario, accessing images from Panoramio via jQuery's AJAX is hindered.

To resolve this issue, consider the following:

1. Ensure JSONP Request Type:

Make sure you are using the correct request type for JSONP (JavaScript Object Notation with Padding). jQuery's $.get method default is "json," but for JSONP, it should be "jsonp." You can achieve this in two ways:

• Use $.getJSON instead of $.get.
• Add callback=? to the URL when using $.get, which triggers jQuery to use JSONP.

Example using $.getJSON:

$.getJSON(url, function (data) { ... });

Example using $.get with callback=? URL:

$.get(url + "&callback=?", function (data) { ... });

2. Troubleshooting Tips for CORS (Cross-Origin Resource Sharing):

• Check that the cross-origin request is being made from a valid source (e.g., http://, not file://).
• Verify browser support for CORS. Internet Explorer and Opera have limited CORS support.

Note: When attempting CORS requests from file:// URLs, the browser may not be able to send an Origin header, resulting in a null origin that the server cannot authorize.

By following these suggestions, you can effectively resolve the "Origin null is not allowed by Access-Control-Allow-Origin" error when making requests from file:// URLs.

The above is the detailed content of How to Fix the 'Origin null is not allowed by Access-Control-Allow-Origin' Error from File:// URLs?. For more information, please follow other related articles on the PHP Chinese website!