Nginx静态资源跨域需在location中显式配置CORS头并处理OPTIONS预检，使用add_header ... always确保所有响应含头，指定Origin、Methods、Headers等，并验证响应头是否生效。
在 Nginx 的 Virtual Host（即 server 块）中配置静态资源跨域访问，核心是为静态文件响应添加标准 CORS 响应头，并正确处理预检请求（OPTIONS）。关键在于：静态资源不经过后端代理，所以不能依赖 proxy_pass 后的动态响应头注入，必须直接在 location 中对静态路径显式设置头信息。
针对静态资源路径配置 CORS 头
假设你用 Nginx 直接托管前端构建产物（如 Vue/React 的 dist 目录），且需让其他域名（如 https://admin.example.com）能通过 JavaScript 加载该站点下的图片、JSON 或字体等静态资源，应在对应 location 块中添加头：
- 使用
add_header ... always确保即使返回 304 或 404 也能带上 CORS 头（always是必需的，否则默认只对 2xx/3xx 生效） - 静态资源通常放在
/static/、/assets/或根路径下，需明确匹配这些 location - 若需支持凭证（如 cookie），
Access-Control-Allow-Origin不能为*，且必须启用Access-Control-Allow-Credentials
允许指定域名访问静态资源
例如，只允许 https://app.example.com 跨域读取 /public/ 下的 JSON 配置文件：
location /public/ {
alias /var/www/myapp/public/;
add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,ETag' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
<pre class="brush:php;toolbar:false;">if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}}
根路径或通用静态资源统一配置
若整个站点都托管静态文件（如单页应用），可在 location / 中统一加 CORS 头，但注意优先级和覆盖关系：
- 确保
add_header在try_files或index指令之后，否则可能被忽略 - 避免与后端代理 location 冲突；静态资源 location 应更具体（如
location ~* \.(js|css|png|jpg|woff2)$） - 推荐按扩展名精细化控制，例如仅对 API 类 JSON 文件开放跨域写权限，而图片只允 GET
常见陷阱与验证要点
配置后务必验证实际响应头是否生效：
- 用
curl -I https://yourdomain.com/assets/config.json检查是否返回Access-Control-Allow-Origin - 浏览器开发者工具 Network 标签中查看 Response Headers，确认没有被后端或中间件覆盖
- 若同时在后端设置了 CORS，建议关闭后端头，只由 Nginx 统一管控，避免冲突
- 注意大小写：Nginx 对 header 名不敏感，但浏览器严格区分，推荐统一用首字母大写格式（如
Access-Control-Allow-Origin）
