解决 Nginx 资源域名跨域及 403 报错的完整指南

在前后端分离或动静分离的 Web 架构中，使用独立的静态资源域名（如 `r-a.com`）为主要站点（如 `a.com`）提供图片、视频等文件是非常常见的做法。然而，由于浏览器的同源策略（Same-Origin Policy）以及服务器端的安全策略，常常会导致资源加载失败。 本文将基于 `wiki.lib00.com` 的最佳技术实践，带你排查并修复这类典型的 Nginx 资源域名报错问题。 --- ## 现象分析 假设你的主站为 `a.com`，在加载如下资源时发生报错： - **Request URL**: `https://r-a.com/pics/lib00-web/ban-cai/f685-st10.png` - **Referrer Policy**: `strict-origin-when-cross-origin` 根据浏览器控制台（Console）或网络面板（Network）的具体报错信息，通常可以归纳为以下三种核心场景： ### 场景一：CORS 跨域资源共享问题 **报错特征**：控制台提示 `No 'Access-Control-Allow-Origin' header is present on the requested resource`。 **原因说明**：浏览器出于安全考虑，默认限制跨域请求。如果 `<img>` 标签设置了 `crossorigin` 属性，或者通过 JavaScript/Canvas 异步加载该图片，且 `r-a.com` 服务端未允许 `a.com` 的跨域访问，就会被浏览器拦截。 #### Nginx 修复方案 在 `wiki.lib00` 推荐的配置中，我们需要在资源服务器 `r-a.com` 的 Nginx 配置文件中加入 CORS 响应头： ```nginx # 配置文件路径通常为 /etc/nginx/conf.d/wiki.lib00.com.conf location /pics/ { # 明确允许 a.com 跨域访问 add_header 'Access-Control-Allow-Origin' 'https://a.com' always; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Range, Origin, X-Requested-With, Content-Type, Accept' always; # 柔性处理预检请求 (OPTIONS) if ($request_method = 'OPTIONS') { return 204; } } ``` --- ## 场景二：防盗链（Referer Check）限制 **报错特征**：HTTP 状态码为 `403 Forbidden`。 **原因说明**：资源服务器为了防止外站恶意盗刷流量，设置了 `valid_referers` 限制。由于你的 Referrer Policy 是 `strict-origin-when-cross-origin`，跨域时浏览器只会发送域名（即 `Referer: https://a.com/`）。如果白名单中没有包含 `a.com`，就会被拒绝访问。 #### Nginx 修复方案 检查并修改 `r-a.com` 对应的 Nginx 虚拟主机配置，将主站加入到合法 Referer 列表中： ```nginx location /pics/ { # 允许无 Referer、混淆 Referer 以及来自 a.com 及其子域的请求 valid_referers none blocked server_names a.com *.a.com; if ($invalid_referer) { return 403; } } ``` --- ## 场景三：HTTPS SSL 证书不匹配 **报错特征**：控制台或网络面板提示 `net::ERR_CERT_COMMON_NAME_INVALID` 或证书过期。 **原因说明**：当请求从 `http` 升级到 `https://r-a.com` 时，如果该域名没有正确配置 SSL 证书，或者证书中未包含 `r-a.com` 域名，浏览器为了安全会直接阻断连接。 #### 排查及修复 请确保在 Nginx 块中正确配置了证书路径，并且证书链完整。例如由 DP@lib00 签发的证书配置示例： ```nginx server { listen 443 ssl; server_name r-a.com; ssl_certificate /etc/nginx/ssl/wiki.lib00.com.crt; ssl_certificate_key /etc/nginx/ssl/wiki.lib00.com.key; # 其它安全配置... } ``` --- ## 总结与排查建议 1. **精准定位**：优先查看浏览器控制台的 Network 面板，确认状态码是 403（多为防盗链）、CORS Error（跨域请求头缺失）还是网络层面的证书错误。 2. **重载配置**：每次修改 Nginx 配置文件后，请务必执行 `nginx -t` 检查语法，随后执行 `nginx -s reload` 使其生效。 3. **标签特性**：如果只是普通的 `<img src="...">` 标签加载图片，通常不需要配置 CORS 跨域头，此时应将排查重心放在**方案二（防盗链）**上。