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

Question

我已经开始编写一个HTML文件，该文件使用JavaScript显示数据。因为它应该尽可能容易地完成，所以我不想在任何其他本地http服务器上运行nodejs。我刚刚在浏览器中打开了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请求到不同的服务器比一个托管当前页面时，它首先发送一个OPTIONSHTTP消息。在该消息中，它发送以下标头：

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

后端服务器将响应：

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

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

另外一个选项

如果更改后端以返回以下标头，则可以告诉浏览器允许从本地主机连接到后端。

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

并且，您还需要告诉您的本地服务器以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")

该命令的源代码和更多信息可在此页面的Let's Encrypt中找到。

Answer 2

设计上不可能

当尝试从磁盘上的文件（使用该协议的网页）进行 CORS 时， CORS始终file://会被阻止。您无法执行任何操作来使其从文件中运行。这根本不可能。

这样做的原因是磁盘上的文件没有真正的“来源”来允许后端服务器确定请求的有效性。您可以将问题跟踪 html 文件与博客 html 文件放在同一磁盘上。服务器无法知道哪个 html 请求了数据（您甚至可以通过带有嵌入式 javascript 的 Dropbox 共享其他人的文件，当您打开它时，这些文件可能会尝试访问您的服务器数据 - 没有人会想到当他们只是打开一个纯 html 文件时会遭到黑客攻击！ ！）。

这就是为什么没有浏览器供应商允许您从文件发出 CORS 请求。

你需要一台服务器

为了让它工作，你需要一个 HTTP 服务器。有很多选项可以实现此目的，从在计算机上安装 Apache/Nginx 到运行webpack-dev-server或等开发服务器local-web-server。只要协议允许http://或者https://您可以发出 CORS 请求。

一旦您有了为您的 html 文件提供服务的服务器，您就可以像往常一样在后端配置 CORS。