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

http://aszhi.com/jishu/80.html

使用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填写域名

  1. < meta http-equiv=”Access-Control-Allow-Origin” content=”*” >

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

  1. header(“Access-Control-Allow-Origin: *”);

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

IIS配置

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

  1. AccessControlAllowHeadersContentType, api_key, Authorization
  2. AccessControlAllowOrigin:*
Apache配置

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

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

主要是修改nginx.conf

  1. location ~* .(eot|ttf|woff|svg|otf){
  2. add_header AccessControlAllowOrigin *;
  3. }

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

  1. location / {
  2. add_header AccessControlAllowOrigin *;
  3. }
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏