jquery 在本地打开的html文件中阻止CORS请求

vi4fp9gy  于 2022-12-18  发布在  jQuery
关注(0)|答案(5)|浏览(303)

我已经开始写一个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,但我一直都要手动执行此操作,因此我不喜欢它。

qjp7pelc

qjp7pelc1#

当您的浏览器向托管当前页面的服务器以外的服务器发出 AJAX 请求时,它首先会发送一条OPTIONS HTTP消息。在该消息中,它会发送以下报头:

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

后端服务器将响应:

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

但是,当你没有网络服务器时,你的浏览器就没有地址可以放在origin头文件中,这就是为什么你的浏览器不允许你从本地文件发出任何 AJAX 请求(也许你可以像评论中提到的那样禁用浏览器的CORS安全,但这会让你面临恶意网站的风险)。

另一个选择

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

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")

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

yshpjwxd

yshpjwxd2#

在Firefox上,您可以安装此插件:https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/禁用相应选项卡的CORS。然后,任何请求也将在file:/// URI上工作。但要小心!

nhn9ugyo

nhn9ugyo3#

要么**mock** AJAX 调用,要么启动配置了反向代理和HTTP重写的Web服务器,因为我确信您不想或无权配置API服务器CORS标头。
如果你不想模拟 AJAX 调用,那么使用:

  1. node-http-proxy
  2. nginx -如果你没有nodejs,你不想安装它。
kpbwa7wx

kpbwa7wx4#

根据设计不可能

当从磁盘上的文件(使用file://协议的网页)尝试CORS时,总是被阻止。您无法从文件使其工作。这根本不可能
其原因是磁盘上的文件没有真实的的“来源”,后端服务器无法确定请求的有效性。您可以将问题跟踪html的文件与博客html的文件放在同一磁盘上。服务器无法知道哪个html请求了数据(您甚至可以通过Dropbox共享其他人的文件,并嵌入JavaScript,以便在您打开文件时尝试访问您服务器上的数据-当他们简单地打开纯HTML文件时,没有人预料到黑客企图!!)。
这就是为什么没有浏览器供应商允许您从文件发出CORS请求的原因。

您需要一台服务器

要使它工作,你需要一个HTTP服务器。有很多选项,从安装Apache/Nginx在您的机器上运行开发服务器,如webpack-dev-serverlocal-web-server。只要协议是http://https://,你就可以发出CORS请求。
一旦有了服务器来提供html文件,您就可以像往常一样在后端配置CORS。

laximzn5

laximzn55#

如果无法设置access-control-allow-origin,可以尝试此操作。

如果你的数据不在同一个域中,使用“callback”函数,并将你的数据“jsonCallback(“... data...“)” Package 起来,就像我的例子: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

相关问题