Nginx 配置静态资源 CORS 需精准路径匹配、完整响应头（带 always）、显式处理 OPTIONS 预检请求；推荐用正则或 /static/ 路径限定范围，重点覆盖字体文件，避免全局污染。
在 Nginx 中为静态资源（如 JS、CSS、字体、图片）配置 CORS，关键不是简单加几个头，而是路径匹配要准、响应头要全、预检请求要稳。否则字体不加载、JS 报错、“blocked by CORS policy”会反复出现。
精准匹配静态资源路径
不要在 http 或 server 块里全局加 CORS 头，避免污染 API 接口或后台页面。推荐用正则明确限定资源类型：
- 用
location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg|ico)$覆盖主流静态后缀 - 若所有静态文件统一放在
/static/下，可改用location /static/ { }，更简洁可控 - 特别注意字体文件（.woff2、.ttf 等），哪怕本地
file://打开也会触发 CORS 校验，漏配就会白屏
添加完整且带 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、204 等非标准响应体状态码会丢失这些头
显式处理 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 -t && nginx -s reload，再检查实际响应：
- 用
curl -I https://yoursite.com/app.js查看是否有Access-Control-Allow-Origin - 手动发预检请求：
curl -X OPTIONS -I https://yoursite.com/fonts/icon.woff2，确认返回 204 且含全部 CORS 头 - 打开浏览器开发者工具的 Network 面板，找一个字体或 JS 文件，看 Response Headers 里是否齐全
