当我通过 AJAX 从 file:// URL 获取图像时，为什么会出现'Access-Control-Allow-Origin 不允许 Origin null”？

从 file:// URL 请求时出现“Access-Control-Allow-Origin 不允许 Origin null”

中尝试通过 AJAX 从 Panoramio 检索图像时，Chrome 中反复出现错误：“XMLHttpRequest 无法加载 [Panoramio API URL]。Origin null is Access-Control-Allow-Origin 不允许。”此错误源于以下根本问题：

1. 错误配置的请求类型：
   初始代码未将请求类型指定为 JSONP。随后，jQuery 采用了 XMLHttpRequest，它依赖于跨域资源共享 (CORS) 来进行跨域请求。但是，浏览器仅通过 Access-Control-Allow-Origin 标头通过服务器授权才支持 CORS。
2. 来自 file:// URL 的 Null Origin:
   因为代码是从以下位置执行的file:// URL，生成了一个 null Origin 标头。这个 null Origin 无法从服务器回显，导致授权失败。

解决方案：

要解决这些问题，请进行以下更正：

1. 使用 $.getJSON 与callback=?:
   使用 $.getJSON 代替 $.get，并附加callback=?到请求 URL。这指示 jQuery 使用 JSONP，它会自动将请求类型设置为“jsonp”。
2. 确保 HTTP 协议：
   确保从 HTTP URL 执行代码 (http: //) 而不是文件://。这使得 CORS 能够正常运行。

修订的代码：

$.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
});

故障排除提示：

• 确保 JSONP 语法（例如，URL 包含回调=？） $.get 请求。
• 使用 HTTP URL 进行跨源 XMLHttpRequest 请求。
• 验证浏览器对 CORS 的支持（例如，Opera 和 Internet Explorer 可能不完全支持）。

以上是当我通过 AJAX 从 file:// URL 获取图像时，为什么会出现'Access-Control-Allow-Origin 不允许 Origin null”？的详细内容。更多信息请关注PHP中文网其他相关文章！