原因:CORS 头缺少 ‘Access-Control-Allow-Origin’ 解决办法

今天在在跨域调试网站注册功能的时候,提示如下错误:

已拦截跨源请求:同源策略禁止读取位于 https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.woff2?v=4.4.0 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。[详细了解]
已拦截跨源请求:同源策略禁止读取位于 https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.woff?v=4.4.0 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。[详细了解]
已拦截跨源请求:同源策略禁止读取位于 https://www.fujieace.com/wp-content/themes/fujie/css/fonts/fontawesome-webfont.ttf?v=4.4.0 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。[详细了解]

原因:CORS 头缺少 'Access-Control-Allow-Origin'

 

解决办法:

其实,解决这个办法有很多,我博客曾经也发表过“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 跨域,具体如下:

 

1、IIS配置:只需要在IIS添加HTTP响应标头即可!

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

 

2、Apache配置:主要修改http.conf

<Directory "/Users/cindy/dev">
AllowOverride ALL
Header set Access-Control-Allow-Origin *
</Directory>

或者,修改Apache伪静态规则文件.htaccess

<IfModule mod_setenvif.c>  
    <IfModule mod_headers.c>  
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">  
            SetEnvIf Origin ":" IS_CORS  
            Header set Access-Control-Allow-Origin "*" env=IS_CORS  
        </FilesMatch>  
    </IfModule>  
</IfModule>  

 

3、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 *;  
}  

 

总结:我个人觉得最简单的方法莫过于前面两种方法了,如果看了此文章还有什么不明白的可以直接给我评论留言。

 

猜你还需要看:

  1. Nginx提示CORS :No ‘Access-Control-Allow-Origin’ header 解决办法
  2. 【跨域】解决办法:利用 Access-Control-Allow-Origin
  3. ajax允许跨域访问 :Access-Control-Allow-Origin 代码案例
    A+
发布日期:2018年10月20日  所属分类:HTML
最后修改时间:2018-10-20 19:03
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
付杰
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
wordpress discux dedecms 帝国 phpcms等快速建站服务
wordpress discux dedecms 帝国 phpcms等快速建站服务
  • ¥ 99.9元
  • 市场价:499.9元
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
永久免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

 

目前评论:5   其中:访客  3   博主  2

  1. 萧瑟の暧昧 1

    大佬你好!我是php是新手,用的织梦建站,移动端使用二级域名访问时,icon font图标访问失败了,查看原因是Access-Control-Allow-Origin的问题 按照您的博客说的:
    Nginx配置:主要是修改nginx.conf,但是,还是没有效果(修改重启后,也清除缓存)了 ,至于前两种添加Access-Control-Allow-Origin的方案,织梦模板不清楚具体该添加到哪个页面?试了几个也都无效。
    麻烦空闲的时候能不能给我讲一下怎么办呢?

    • 付杰 付杰

      @萧瑟の暧昧 你是用LNMP\LAMP一键安装包,还是用宝塔?还是自己配置的环境?有具体的线上网站地址?

      • 萧瑟の暧昧 1

        @付杰 有网站的:www.xacheshen.com、www.xacheshen.com\m、m..xacheshen.com;
        我用的是宝塔面板,用的是Nginx;
        m.的二级域名移动网站,之前看网上教程把引用资源的全部变成绝对路径,我就都修改成 www.xxx.com/m/xxx.css,结果icon font都显示成小方块了,研究了半天才发现跨域的问题,m.xxx.com不允许访问www.xxx.com/m/ ,按照您写的方法修改了服务器确实没有解决 ,刚才有位老哥给了个解决方案就是,css的引用直接写m.xxx.com/xxx.css,目前这样是解决了。
        我也不知道这样算不算真正解决了,因为现在xxx.com/m/下访问又全部变成小方块了,不过这个路径基本上以后不打算用了,感觉最好的解决问题确实是您博客写的那样,但是下载模板全部都修改完成了!

        • 付杰 付杰

          @萧瑟の暧昧 由于你用的是宝塔面板,安装的软件是LNMP,只需要去网站相应的配置文件加入以下代码:(由于你有www.xacheshen.com 和 m.xacheshen.com这两个网站,你的配置文件里应该有两个server,两个server里都加入最好。)

          location ~* \.(eot|ttf|woff|woff2|svg)$ {
              add_header Access-Control-Allow-Origin *;
              add_header Access-Control-Allow-Headers X-Requested-With;
              add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
          }
          • 萧瑟の暧昧 1

            @付杰 博主威望,帮我解决了这个难题!(由于我是新手,看了文章照样很懵懂,最后看到联系方式,索性就加上问问!)