跨服务器加载CSS中引用的字体文件失败，求解决方案

核心原因 #

你遇到的所有问题根源都是跨域资源共享（CORS）限制：浏览器会阻止从server2页面加载server1域名下的字体资源，除非server1明确允许server2的跨域请求。

可行解决方案 #

方案1：在server1的.htaccess中添加CORS允许规则 #

如果能修改server1根目录下的.htaccess文件（依托FTP权限可操作），添加以下规则，让server1允许server2的域名访问CSS和字体文件：

# Server1的.htaccess
<FilesMatch "\.(css|woff2)$">
    Header set Access-Control-Allow-Origin "http://server2"
</FilesMatch>

如果需要允许多个域名，或者临时测试时允许所有域名（生产环境不推荐），可以调整为：

# 允许多个指定域名
Header set Access-Control-Allow-Origin "http://server2 http://otherserver"

# 允许所有域名（仅测试用）
Header set Access-Control-Allow-Origin "*"

配置生效后，无论是server2重定向请求资源，还是直接引用server1的CSS/字体，浏览器都会允许加载。

方案2：在server2的.htaccess中配置反向代理（规避跨域） #

如果无法修改server1的.htaccess，可以将server2的重定向改为反向代理：让server2作为中间层，替浏览器向server1获取资源，浏览器看到的资源域名始终是server2，不会触发跨域限制。

修改server2的.htaccess如下：

# Server2的.htaccess
Options -Indexes
Options +FollowSymlinks

RewriteEngine On

# 代理CSS请求到server1
RewriteRule ^(.*)\.css$ http://server1/$1.css [P,L]
# 代理字体请求到server1
RewriteRule ^(.*)\.woff2$ http://server1/$1.woff2 [P,L]

关键是将原规则的普通重定向改为[P]标志（启用代理），同时保留[L]终止后续规则。注意：该方案需要服务器开启mod_proxy和mod_proxy_http模块，大部分共享主机默认支持，若未开启需联系主机商。

验证步骤 #

1. 配置完成后清空浏览器缓存
2. 打开server2页面，查看网络请求：
   • 方案1下，CSS和字体请求域名为server1，响应头包含Access-Control-Allow-Origin
   • 方案2下，CSS和字体请求域名为server2
   • 确认字体资源加载成功，无CORS报错

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