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

## 起因在调试一个网站项目的时候，发现字体图标出不来，然后检查路径发现引用没用问题，添加 CDN 字体之后可以正常出来。打开浏览器调试工具，在控制台出现错误提示如下错误：*已拦截跨源请求：同源策略禁止读取位...

起因

在调试一个网站项目的时候，发现字体图标出不来，然后检查路径发现引用没用问题，添加 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’ 解决办法

发表于 2020-01-04 11:55:33
阅读 ( 172 )