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

起因

在调试一个网站项目的时候,发现字体图标出不来,然后检查路径发现引用没用问题,添加 CDN 字体之后可以正常出来。打开浏览器调试工具,在控制台出现错误提示如下错误:已拦截跨源请求:同源策略禁止读取位于 https://domain.com/css/fonts/fontawesome-webfont.woff?v=4.4.0 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。[详细了解]
因此确定了错误是跨域的问题。

解决办法:

百度了一下解决方法有很多,下面列举一下以备查使用:

  • 在被请求页面的<head></head>中加入同源访问控制标签,代码如下,最好 content 中填入站点域名。
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
  • 在 PHP 项目中,可以使用 header 函数,在请求控制器中加入 header 头。
    header("Access-Control-Allow-Origin: *");
  • 在 http 服务软件中加入 Access-Control-Allow-Origin 跨域配置
    IIS 配置: 仅需在 IIS 配置中添加 HTTP 响应标头即可。
    Access-Control-Allow-Headers:Content-Type, api_key, Authorization
    Access-Control-Allow-Origin:*

    Apache 配置:修改配置文件 http.conf(主配置文件)或 vhost.conf(虚拟主机配置文件)中加入 Header set Access-Control-Allow-Origin *,例如:

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

    或者,也可以修改 Apache 的伪静态规则文件 .htaccess。
    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 *;
    }

参考文章 来源:付杰博客 作者:付杰 原文:原因:CORS 头缺少 ‘Access-Control-Allow-Origin’ 解决办法

讨论数量: 0

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!