【问题标题】：CORS request blocked in locally opened htmlCORS 请求在本地打开的 html 中被阻止
【发布时间】：2018-06-29 22:24:42
【问题描述】：

我已经开始编写一个用 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，但我必须一直手动执行此操作，所以我不喜欢它。

【问题讨论】：

无论你是否启动一个HTTP服务器，你都无法摆脱这个问题。您正在访问的 API 并不打算在浏览器中使用，因此禁用浏览器的安全功能是使其在浏览器中工作的唯一方法。根据您的用例，您应该考虑只在没有浏览器的情况下运行脚本（使用 node.js，但无需启动服务器）。

标签： javascript jquery ajax cors

【解决方案1】：

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

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

后端服务器将响应：

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

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

另一种选择

如果您将后端更改为返回以下标头，则可以告诉浏览器允许从 localhost 连接到后端：

access-control-allow-origin: https://localhost:8888

而且，您还需要告诉 localhost 服务器以 HTTPS 而不是 HTTP 为您的页面提供服务。一旦满足这两个条件，CORS 验证就不会失败。

请注意，要启用 HTTPS，您需要拥有 SSL 证书和密钥，您可以使用以下命令生成它们：

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

该命令的来源和更多信息可在this page from Let's Encrypt 中找到。

【讨论】：

我们可以在后端服务器中做些什么来允许来自本地文件的请求吗？
是的，我用替代解决方案更新了我的答案。
另一种方法是使用JsonP，但这意味着您可以修改要连接的主机

【解决方案2】：

mock Ajax 调用，或启动配置了反向代理和 HTTP 重写的 Web 服务器，因为我确定您不希望或无权配置 API 服务器 CORS 标头.

如果您不想模拟 ajax 调用，请使用以下任一方法：

node-http-proxy
nginx - 如果你没有 nodejs 并且不想安装它。

【讨论】：

嗨，你读过OP问题中的“不启动本地http服务器”吗？
是的，我做到了！我的答案仍然有效，因为即使在 file:// 协议上也应用了 CORS 浏览器策略。而且由于您不能“在您的文件系统上”更改 HTTP 标头，因此唯一的选择是应该为您提供该文件的某种反向代理或网络服务器。

【解决方案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

【讨论】：