Chrome(谷歌)浏览器跨域请求被阻止,CORS 头缺少‘Access-Control-Allow-Origin’的解决办法

原创 小智  2020-12-10 22:48  阅读 242 次

使用Chrome(谷歌)浏览器跨域访问不在同一域名下的资源文件(ip地址+端口号)时,会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”错误。因为被请求的资源没有设置‘Access-Control-Allow-Origin’,所以浏览器同源策略限制了此类发起的请求不被允许。

Access to XMLHttpRequest at 'http://www.quguangjie.cn/home/login/see' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译:因为被请求的资源没有设置‘Access-Control-Allow-Origin’,所以 从’http://www.quguangjie.cn/’发起的请求不被允许。

被请求的资源没有设置‘Access-Control-Allow-Origin’

分析原因

已拦截跨源请求:同源策略禁止读取位于 http://www.quguangjie.cn/home/login/see 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

Chrome(谷歌)浏览器可以通过设置,解决跨域问题的方法

设置方法:在双核Chrome浏览器(版本3.0.1.6,内核版本75.0.3770.100)的快捷图标上点击 鼠标右键 ——》点击“属性”选择“快捷方式”标签——》“目标”里面,在原chrome路径的基础上增加 --allow-file-access-from-files——》应用——》确定 关闭属性窗口——》关闭所有已打开的chrome,重新启动。

Chrome浏览器通过设置解决跨域问题

PS:增加--allow-file-access-from-files后缀时,一定要有空格,如果不加空格,你会惊奇的发现你无法修改成功。

通过添加“扩展程序”设置Allow CORS

设置方法:打开双核Chrome浏览器(版本3.0.1.6,内核版本75.0.3770.100)点击 自定义及控制 ——》点击“扩展程序”——》获取更多扩展程序——》在搜索框中输入 Access-Control-Allow-Origin,选择对应的“Allow CORS: Access-Control-Allow-Origin”——》安装即可。

PS:“Access-Control-Allow-Origin”是谷歌应用,估计需要翻墙才能下载安装。

扩展程序Allow CORS: Access-Control-Allow-Origin

上述步骤设置完之后如果仍然报错,那就再按照网上大家分享的方法继续处理

第一种方法:被请求页面加上下面的代码,最好content填写域名

< meta http-equiv="Access-Control-Allow-Origin" content="*" >

第二种方法:在请求控制器加上加上下面的代码

header("Access-Control-Allow-Origin: *");

第三种方法:IIS、Apache、Nginx可以直接配置Access-Control-Allow-Origin 跨域,具体如下:

IIS配置

只需要在IIS添加HTTP响应标头即可!

Access-Control-Allow-Headers:Content-Type, api_key, Authorization
Access-Control-Allow-Origin:*
Apache配置

主要修改http.conf 或者,修改Apache伪静态规则文件.htaccess

<Directory “/Users/cindy/dev”>
AllowOverride ALL
Header set Access-Control-Allow-Origin * 
Nginx配置

主要是修改nginx.conf

location ~* .(eot|ttf|woff|svg|otf)$ {
add_header Access-Control-Allow-Origin *;
}

上面的eot|ttf|woff|svg|otf,表示请求后缀类型,或者也可以直接写如下代码:

location / {
add_header Access-Control-Allow-Origin *;
}
本文地址:http://aszhi.com/jishu/80.html
关注我们:请关注一下微信号:扫描二维码爱思智前端的微信号
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!

发表评论


表情