我已经开始写一个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,但我一直都要手动执行此操作,因此我不喜欢它。
5条答案
按热度按时间qjp7pelc1#
当您的浏览器向托管当前页面的服务器以外的服务器发出 AJAX 请求时,它首先会发送一条
OPTIONS
HTTP消息。在该消息中,它会发送以下报头:后端服务器将响应:
但是,当你没有网络服务器时,你的浏览器就没有地址可以放在
origin
头文件中,这就是为什么你的浏览器不允许你从本地文件发出任何 AJAX 请求(也许你可以像评论中提到的那样禁用浏览器的CORS安全,但这会让你面临恶意网站的风险)。另一个选择
如果您更改后端以返回以下标头,则可以告诉浏览器允许从localhost连接到后端:
型
而且,您还需要通知本地主机服务器以HTTPS而不是HTTP提供页面。一旦这两个条件都满足,CORS验证就不会失败。
请注意,要启用HTTPS,您需要有SSL证书和密钥,您可以使用以下命令生成它们:
在this page from Let's Encrypt中可以找到该命令的源代码和更多信息。
yshpjwxd2#
在Firefox上,您可以安装此插件:https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/禁用相应选项卡的CORS。然后,任何请求也将在
file:///
URI上工作。但要小心!nhn9ugyo3#
要么**mock** AJAX 调用,要么启动配置了反向代理和HTTP重写的Web服务器,因为我确信您不想或无权配置API服务器CORS标头。
如果你不想模拟 AJAX 调用,那么使用:
kpbwa7wx4#
根据设计不可能
当从磁盘上的文件(使用
file://
协议的网页)尝试CORS时,总是被阻止。您无法从文件使其工作。这根本不可能。其原因是磁盘上的文件没有真实的的“来源”,后端服务器无法确定请求的有效性。您可以将问题跟踪html的文件与博客html的文件放在同一磁盘上。服务器无法知道哪个html请求了数据(您甚至可以通过Dropbox共享其他人的文件,并嵌入JavaScript,以便在您打开文件时尝试访问您服务器上的数据-当他们简单地打开纯HTML文件时,没有人预料到黑客企图!!)。
这就是为什么没有浏览器供应商允许您从文件发出CORS请求的原因。
您需要一台服务器
要使它工作,你需要一个HTTP服务器。有很多选项,从安装Apache/Nginx在您的机器上运行开发服务器,如
webpack-dev-server
或local-web-server
。只要协议是http://
或https://
,你就可以发出CORS请求。一旦有了服务器来提供html文件,您就可以像往常一样在后端配置CORS。
laximzn55#
如果无法设置access-control-allow-origin,可以尝试此操作。
如果你的数据不在同一个域中,使用“callback”函数,并将你的数据“jsonCallback(“... data...“)” Package 起来,就像我的例子:http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?
Working example