宝塔面板下 Discuz 备用域名图标不显示?完美解决 CORS 跨域报错教程
**问题现象**:
Discuz 论坛绑定了主域名和备用域名。使用主域名访问一切正常,但使用备用域名访问时,图标(如字体图标 `dzicon.woff2`)全部不显示,变成了方块或空白。
按 `F12` 打开浏览器控制台,报错如下:
> `Access to font at 'https://主域名.com/static/image/common/dzicon.woff2' from origin 'https://备用域名.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`
**问题原因**:
这是典型的 **CORS(跨域资源共享)限制**。现代浏览器出于安全考虑,禁止一个域名(备用域名)跨域加载另一个域名(主域名)下的字体资源(`.woff2`、`.woff` 等),除非服务器明确返回了跨域许可头(`Access-Control-Allow-Origin`)。
**为什么在宝塔面板里开了“跨域配置”没用?**
很多站长会去宝塔面板的“网站设置 -> 跨域配置”里打开开关,填入备用域名。但**依然无效**。这是因为宝塔 UI 生成的底层 Nginx 代码不够严谨:
1. 它通常只作用于全局,没有针对字体文件专门生成 `location` 规则。
2. **最致命的**:它缺少 `always` 参数。当浏览器触发缓存(返回 304 状态码)或发送 OPTIONS 预检请求时,Nginx 默认不会输出跨域头,导致跨域失败。
---
## 🛠️ 终极解决方案(手动修改 Nginx 配置文件)
既然 UI 面板不管用,我们直接给底层 Nginx 下死命令。
### 第一步:关闭宝塔的跨域 UI 开关(重要)
为了避免底层代码冲突导致报错,请进入宝塔面板 -> 网站 -> 设置 -> **跨域配置**,将“状态”开关**关闭**,并点击保存。
### 第二步:精准修改 Nginx 配置文件
1. 在宝塔面板 -> 网站 -> 设置 -> 点击 **“配置文件”**。
2. 在代码中找到 `root /www/wwwroot/你的网站目录;` 这一行。
3. 在它的**下一行**(空出一行),**粘贴以下代码**:
```nginx
# 解决备用域名加载字体/图标跨域问题
location ~* \.(eot|ttf|woff|svg|otf|woff2)$ {
# 注意:将下面的域名替换为你自己的备用域名,协议头 http/https 要写对
add_header Access-Control-Allow-Origin "https://www.你的备用域名.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Range" always;
# 显式处理浏览器的预检 OPTIONS 请求
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin "https://www.你的备用域名.com" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
add_header Access-Control-Allow-Headers "Content-Type, Range" always;
add_header Content-Length 0;
add_header Content-Type text/plain;
return 204;
}
}
```
*(注意:请务必将代码中的 `https://www.你的备用域名.com` 替换成你真实的备用域名,不要带末尾的斜杠)*
4. 点击右下角**“保存”**。
### 第三步:重载 Nginx 生效
千万不要直接点“重启服务器”(会导致网站中断)。
请去宝塔左侧菜单 -> **软件商店** -> 找到已安装的 **Nginx** -> 点击 **“设置”** -> 点击 **“重载配置”**。
### 第四步:清理缓存并验证
回到你的备用域名下,按 `Ctrl + F5` 强制刷新页面。
此时图标应该奇迹般地恢复了!你可以在 F12 的网络面板中,查看 `.woff2` 文件的响应头,里面已经成功带上了 `Access-Control-Allow-Origin: https://你的备用域名`。
---
## 💡 进阶避坑指南
1. **CDN 拦截**:如果你主域名套了 CDN(如百度云、腾讯云等),CDN 节点可能会过滤掉你源站添加的跨域头。如果按教程修改后依然报错,请去 CDN 控制台配置 HTTP 响应头,并在 CDN 后台清理一下缓存。
2. **多域名登录同步**:跨域问题解决后,如果你希望用户不管在主域名还是备用域名下登录,都能保持登录状态(同步 Cookie),请修改 Discuz 根目录下的 `config/config_global.php` 文件,找到 `$_config['cookie']['cookiedomain']`,将其设置为你的根域名(例如 `'.dcbbs.cc'`,注意前面的点)。
3. **配置备份**:宝塔升级或重置 Nginx 可能会导致配置文件还原,建议将上面那段 Nginx 代码保存在自己的记事本里,以备不时之需。
希望这个教程能帮大家完美避开宝塔 UI 的坑,一次性解决跨域难题!如果有帮助,欢迎顶帖让更多人看到!
页:
[1]