javascript - CORS 请求在本地打开的 html 文件中被阻止

标签 javascript jquery ajax cors

我已经开始编写一个用 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/

相关文章:

javascript - 使用 Visual Studio Code 开发 Nodejs

javascript - 单击按钮时从表中删除成员

javascript - div 的颜色变化太快

javascript - 显示 “No matches found” 或隐藏 DIV 结果(AJAX 和 MySQL)

javascript - JQuery Ajax 成功未被触发

javascript - 有什么方法可以快速轻松地将整个网站的标准网站加载转换为 AJAX?

javascript - React - 更改列表中组件的顺序

javascript - AJAX SEO - 后退和前进按钮

javascript - 如何仅隐藏特定页面上的公共(public)链接?

javascript - jQuery 代码结构之间的区别