Question

我已经开始编写一个用JavaScript显示数据的HTML文件。因为它应该尽可能简单，我不想运行nodejs或任何其他本地http服务器。我刚刚在浏览器中打开了HTML文件（url是file：///home/visu/index.htm）。

一切都很好，直到在index.htm中完成对在线API的jquery ajax请求。浏览器使用以下消息阻止请求：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://x.x.x.x. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

如何在不启动本地http服务器的情况下解决问题？

一个可能的解决方案是使用一些“无安全标志”启动浏览器或禁用带插件的CORS，但我必须一直手动操作，所以我不喜欢它。

Answer 1

当您的浏览器向不同的服务器执行AJAX请求而不是托管当前页面的服务器时，它首先发送OPTIONS HTTP消息。在该消息中，它发送以下标题：

origin: http://my-web-server.com

后端服务器将响应：

access-control-allow-origin: http://my-web-server.com

但是，当您没有网络服务器时，您的浏览器没有地址可以放入origin标头。这就是为什么您的浏览器不允许您从本地文件中执行任何AJAX请求的原因（也许您可以像评论中提到的那样禁用浏览器的CORS安全性，但这会使您面临恶意网站的风险）。

Answer 2

mock Ajax调用，或启动配置了反向代理和HTTP重写的Web服务器，因为我确定您不想要或无法访问配置API服务器CORS标题。

如果您不想模拟ajax调用，请使用：

node-http-proxy
nginx - 如果您没有nodejs而您不想安装它。

Answer 3

如果您无法将其设置为access-control-allow-origin ，则可以尝试此操作。

如果您的数据不在同一个域中，请使用“回调”功能。并将您的数据“jsonCallback（”... data ...“）包装为我的示例：http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?

function jsonCallback(json) {
  $.each(json, function(key, val) {
    // your data is here
    console.log('date: ' + val.date);
    console.log('address: ' + val.address);
    console.log('---');
  });
}

$(document).ready(function() {

  $.getJSON("http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?", function(data) {

  });

});

Working example

CORS请求在本地打开的html中被阻止

3 个答案: