Why Am I Getting 'Origin null is not allowed by Access-Control-Allow-Origin' When Fetching Images via AJAX from a file:// URL?

Error: "Origin null is not allowed by Access-Control-Allow-Origin" when Requesting from file:// URL

In attempts to retrieve images from Panoramio through AJAX, a recurring error arises in Chrome: "XMLHttpRequest cannot load [Panoramio API URL]. Origin null is not allowed by Access-Control-Allow-Origin." This error stems from the following underlying issues:

1. Incorrectly Configured Request Type:
   The initial code did not specify the request type as JSONP. Subsequently, jQuery employed XMLHttpRequest, which relies on Cross-Origin Resource Sharing (CORS) for cross-domain requests. However, browsers support CORS only with server authorization via the Access-Control-Allow-Origin header.
2. Null Origin from file:// URL:
   As the code was executed from a file:// URL, a null Origin header was generated. This null Origin cannot be echoed back from the server, resulting in authorization failure.

Solution:

To resolve these issues, make the following corrections:

1. Use $.getJSON with callback=?:
   Instead of $.get, use $.getJSON and append callback=? to the request URL. This signals jQuery to use JSONP, which automatically sets the request type to "jsonp".
2. Ensure HTTP Protocol:
   Ensure that the code is executed from an HTTP URL (http://) instead of file://. This allows CORS to function properly.

Revised Code:

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?', function (data) {
  // Process data
});

Troubleshooting Tips:

• Ensure JSONP syntax (e.g., URL contains callback=?) for $.get requests.
• Use HTTP URLs for cross-origin XMLHttpRequest requests.
• Verify browser support for CORS (e.g., Opera and Internet Explorer may not support it fully).

The above is the detailed content of Why Am I Getting 'Origin null is not allowed by Access-Control-Allow-Origin' When Fetching Images via AJAX from a file:// URL?. For more information, please follow other related articles on the PHP Chinese website!