Nginx中配置静态资源CORS的关键是精准路径匹配（如location ~*.(js|css|woff2|ttf|png)$）、添加带always的完整响应头、显式处理OPTIONS预检请求并返回204，且避免全局配置污染非目标路径。
在 Nginx 中用 location 配置静态资源的 CORS 策略，关键不是加几个响应头就完事，而是路径要准、头要全、预检要稳。静态资源（如 JS、CSS、woff2、ttf、PNG）一旦跨域加载失败，浏览器控制台会明确报 “blocked by CORS policy”，尤其是字体文件，在 file:// 页面下也会触发校验。
精准匹配静态资源路径
避免在 http 或 server 块里全局加 CORS 头，否则可能污染 API 接口或管理后台等非目标路径。推荐用正则精确匹配常见后缀：
location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg|ico)$ { }- 若所有静态资源统一放在
/static/下，也可用location /static/ { }，更简洁且易维护 - 务必覆盖字体文件（
.woff2、.ttf等），它们是跨域失败的高发区
添加完整且带 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、404 等非 2xx 状态码会丢失这些头
显式处理 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;，确保响应体为空、状态码明确
验证配置是否生效
reload nginx 后，建议快速验证三件事：
- 用
curl -I https://yoursite.com/app.js检查响应头中是否有Access-Control-Allow-Origin - 手动发预检请求：
curl -X OPTIONS -I https://yoursite.com/font.woff2，确认返回 204 且含全部 CORS 头 - 打开浏览器开发者工具的 Network 标签页，加载页面后看 JS/CSS/字体资源是否不再报 CORS 错误
