如何设置站点CORS的Access-Control-Allow-Origin为*解决跨域资源访问问题？

下面是针对不同环境的具体配置方案：

1. 优先在CDN后台配置CORS规则 #

因为你的资源通过CDN域名对外提供，先在CDN管理控制台设置CORS规则：

• 允许的源（Origin）：添加目标站点域名 http://example.com；如需支持多站点，可按需指定多个域名，生产环境不建议用通配符 *
• 允许的请求头：至少包含 Content-Type、Accept
• 允许的方法：GET、HEAD（字体资源仅需这两种请求方法）
• 允许凭据：无需携带Cookie等凭据时，直接关闭即可

2. 源服务器（部署Font Awesome的服务器）配置CORS响应头 #

如果CDN回源到你的服务器，还需在源服务器的Web服务中配置对应规则：

Nginx配置 #

在对应的server或location块中添加：

location ~* \.(ttf|woff|woff2|eot|css|js)$ {
    add_header Access-Control-Allow-Origin http://example.com;
    add_header Access-Control-Allow-Methods "GET, HEAD";
    add_header Access-Control-Allow-Headers "Content-Type, Accept";
}

需要支持多域名时，用变量判断实现：

map $http_origin $cors_origin {
    ~^http://example.com$ http://example.com;
    ~^https://another-site.com$ https://another-site.com;
}

location ~* \.(ttf|woff|woff2|eot|css|js)$ {
    add_header Access-Control-Allow-Origin $cors_origin;
    add_header Access-Control-Allow-Methods "GET, HEAD";
    add_header Access-Control-Allow-Headers "Content-Type, Accept";
}

Apache配置 #

在.htaccess文件或Apache虚拟主机配置中添加：

<FilesMatch "\.(ttf|woff|woff2|eot|css|js)$">
    Header set Access-Control-Allow-Origin "http://example.com"
    Header set Access-Control-Allow-Methods "GET, HEAD"
    Header set Access-Control-Allow-Headers "Content-Type, Accept"
</FilesMatch>

支持多域名可通过Rewrite规则实现：

RewriteEngine On
RewriteCond %{HTTP_ORIGIN} ^http://example.com$ [OR]
RewriteCond %{HTTP_ORIGIN} ^https://another-site.com$
RewriteRule ^ - [E=CORS_ORIGIN:%{HTTP_ORIGIN}]
Header set Access-Control-Allow-Origin "%{CORS_ORIGIN}e" env=CORS_ORIGIN
Header set Access-Control-Allow-Methods "GET, HEAD"
Header set Access-Control-Allow-Headers "Content-Type, Accept"

IIS配置 #

1. 打开IIS管理器，找到部署Font Awesome的站点
2. 进入“HTTP响应头”功能
3. 添加以下三个响应头：
   • 名称：Access-Control-Allow-Origin，值：http://example.com
   • 名称：Access-Control-Allow-Methods，值：GET, HEAD
   • 名称：Access-Control-Allow-Headers，值：Content-Type, Accept
     如需支持多域名，需编写URL重写规则动态设置Origin头。

3. 验证配置有效性 #

配置完成后，用浏览器开发者工具的“网络”面板查看fa-regular-400.ttf的请求响应头，确认是否存在Access-Control-Allow-Origin且值正确。若仍有问题，刷新CDN缓存确保新配置生效。

注意：不要轻易使用mode: 'no-cors'，这种方式会让资源变成不透明响应，大概率导致Font Awesome图标无法正常加载渲染。

内容的提问来源于stack exchange，提问作者kartik kukadiya