<p>在 Nginx 中为静态资源配置 CORS 的核心是：精准匹配路径（如 location ~* .(js|css|woff2|ttf|png)$），添加带 always 的完整响应头，显式处理 OPTIONS 预检请求并返回 204，且避免全局配置污染非目标路径。</p>
在 Nginx 中为静态资源（如 JS、CSS、字体、图片）配置跨域资源共享（CORS），核心是精准匹配资源路径、注入完整响应头，并显式响应 OPTIONS 预检请求。不能只加几个头就完事，否则字体加载失败、JS 报错、控制台持续提示“blocked by CORS policy”都是常见后果。
精准定位静态资源路径
避免在 http 或 server 块中全局添加 CORS 头，防止污染 API 或管理后台等非目标路径。推荐用正则精确匹配常用静态后缀：
location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg|ico)$ { }- 确保覆盖字体文件（.woff2、.ttf 等），它们即使在
file://页面也会触发 CORS 校验 - 若资源统一放在
/static/目录下，也可用location /static/ { }更简洁
添加完整且带 always 的响应头
静态资源通常只读、不传 Cookie，因此多数场景可省略 Access-Control-Allow-Credentials，从而安全使用通配符或指定域名：
-
add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com' always;（推荐具体域名） -
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;（静态资源无需 POST/PUT） add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;-
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;（对字体断点续传很重要） -
always参数必须带上，否则 304 Not Modified 等状态码会丢失这些头
必须显式处理 OPTIONS 预检请求
浏览器加载带自定义 header 的 JS、字体或发起 fetch 请求时，会先发 OPTIONS 探路。Nginx 默认不响应，直接返回空或 502，导致跨域失败：
- 在同一个
location块内添加：if ($request_method = 'OPTIONS') { } - 里面重复写关键 CORS 头（Origin、Methods、Headers），同样带
always - 加上
add_header 'Content-Length' 0;和add_header 'Content-Type' 'text/plain; charset=utf-8'; - 最后以
return 204;结束，返回空响应体
验证配置是否生效
重载配置后（nginx -s reload），通过以下方式确认：
- 访问一个 .js 或 .woff2 文件，用浏览器开发者工具 Network 标签页检查响应头是否含
Access-Control-Allow-Origin - 手动模拟预检：
curl -X OPTIONS -I -H "Origin: https://your-frontend.com" https://yoursite.com/static/app.js，确认返回 204 且头齐全 - 打开控制台，不再出现 “has been blocked by CORS policy” 错误
