我已经开始编写一个用 JavaScript 显示数据的 HTML 文件。因为它应该尽可能简单地完成我不想运行 nodejs oder 任何其他本地 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,但我必须一直手动执行此操作,所以我不喜欢它。
最佳答案
当您的浏览器向不同于托管当前页面的服务器 执行AJAX 请求时,它首先发送一个OPTIONS
HTTP 消息。在该消息中,它发送以下 header :
origin: http://my-web-server.com
后端服务器将响应:
access-control-allow-origin: http://my-web-server.com
但是,当您没有网络服务器时,您的浏览器就没有地址可以放入 origin
header 中。这就是为什么您的浏览器不允许您从本地文件执行任何 AJAX 请求(也许您可以像评论中提到的那样禁用浏览器的 CORS 安全性,但这会使您面临恶意网站的风险)。
另一种选择
如果您更改后端以返回以下 header ,则可以告诉您的浏览器允许从本地主机连接到后端:
access-control-allow-origin: https://localhost:8888
而且,您还需要告诉您的本地主机服务器以 HTTPS 而不是 HTTP 为您的页面提供服务。一旦满足这两个条件,CORS 验证就不会失败。
请注意,要启用 HTTPS,您需要拥有 SSL 证书和 key ,您可以使用以下命令生成它们:
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 中找到.
关于javascript - CORS 请求在本地打开的 html 文件中被阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48362093/