原因: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'）。[详细了解]

解决办法：

其实，解决这个办法有很多，我博客曾经也发表过“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 *;  
}

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

猜你还需要看：

版权声明：本站原创文章，于6年前，由付杰发表，共 1729字。
转载请注明：本文固定链接 https://www.fujieace.com/html/cors.html +复制链接

￥ 99.0元
~~市场价：129.0元~~

购买

￥ 149.0元
~~市场价：299.0元~~

购买

￥ 6.8元
~~市场价：8.8元~~

购买

￥ 98.0元
~~市场价：298.0元~~

购买

发表评论取消回复

目前评论：15 其中：访客 0 博主 0

dageliu 0
回复 2022年01月07日 17:40:54 沙发

IIS配置了没用呢，跨域问题还是存在
- 付杰
  回复 2022年01月07日 19:45:51 1层
  
  @dageliu IIS应该有它的设置方法，你得懂这个原理。不同的情况，处理方法肯定也是略有不同。

雨林 0
回复 2020年11月06日 18:44:45 板凳

你说的在header加header(“Access-Control-Allow-Origin: *”);,关于request的js 前端代码怎么加嘞，我设置的fetch的options 的header 这个属性，还是不可以，还是会报已拦截跨源请求：同源策略禁止读取位于(服务器网址) 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。
- 付杰
  回复 2020年11月06日 22:05:20 1层
  
  @雨林这个一般是后端加吧！例如：php就有header函数，还有就是服务器上配置也行的，例如:apache、nginx都可以配置这个。我建议直接服务器环境配置。

zheng 0
回复 2020年10月20日 16:15:01 地板

你好，我这个按照您的方法更改没有其效果
- 付杰
  回复 2020年10月20日 17:00:22 1层
  
  @zheng 要根据个人环境来改，主要是讲原理。你的情况具体可以+Q群：231560525

久畔 0
回复 2020年06月02日 12:09:41 4楼

我是apache，为什么添加了下面代码之后，域名直接跳转到主域名了，请教一下大佬

AllowOverride ALL
Header set Access-Control-Allow-Origin *
- 付杰
  回复 2020年06月02日 16:28:25 1层
  
  @久畔跳转和这代码没关系的，应该是你设置了其它的。

老六 0
回复 2019年04月17日 18:33:15 5楼

在请求控制器加上加上下面的代码；
header(“Access-Control-Allow-Origin: *”);应该怎么在请求也页面上添加？
- 付杰
  回复 2019年04月17日 19:04:10 1层
  
  @老六如果你网站是php的，直接在请求php的文件加代码就行了。例如：index.php

萧瑟の暧昧 1
回复 2018年12月05日 14:22:08 6楼

大佬你好！我是php是新手，用的织梦建站，移动端使用二级域名访问时，icon font图标访问失败了，查看原因是Access-Control-Allow-Origin的问题按照您的博客说的：
Nginx配置：主要是修改nginx.conf，但是，还是没有效果（修改重启后，也清除缓存）了，至于前两种添加Access-Control-Allow-Origin的方案，织梦模板不清楚具体该添加到哪个页面？试了几个也都无效。
麻烦空闲的时候能不能给我讲一下怎么办呢？
- 付杰
  回复 2018年12月05日 14:53:29 1层
  
  @萧瑟の暧昧你是用LNMP\LAMP一键安装包，还是用宝塔？还是自己配置的环境？有具体的线上网站地址？
  - 萧瑟の暧昧 1
    回复 2018年12月05日 14:59:21 2层
    
    @付杰有网站的：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/下访问又全部变成小方块了，不过这个路径基本上以后不打算用了，感觉最好的解决问题确实是您博客写的那样，但是下载模板全部都修改完成了！
    - 付杰
      回复 2018年12月05日 15:14:06 3层
      
      @萧瑟の暧昧由于你用的是宝塔面板，安装的软件是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
        2018年12月05日 15:18:47 4层
        
        @付杰博主威望，帮我解决了这个难题！（由于我是新手，看了文章照样很懵懂，最后看到联系方式，索性就加上问问！）