精准匹配静态资源后缀并配置带always的CORS头、单独拦截OPTIONS预检返回204，可安全放开JS/CSS/字体/图片等跨域访问；需避免全局配置、用正则限定类型、确保预检响应头完整。
直接在 location 块中精准匹配静态资源后缀，添加带 always 的 CORS 响应头，并单独拦截 OPTIONS 预检请求返回 204，就能安全放开 JS、CSS、字体、图片等静态资源的跨域访问。关键不是加头，而是头不丢、预检稳、路径准。
只给静态资源配 CORS，别污染全局
不要在 server 或 http 块里加 CORS 头，否则可能误加到 HTML、API 或登录页上，带来安全风险或兼容问题。推荐用正则精确限定资源类型：
location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg|ico)$ { }- 这个规则覆盖前端常用静态文件，避开 HTML、JSON 接口和后台路径
- 确保
.woff2、.ttf等字体后缀被包含——本地file://页面加载字体也会触发 CORS 校验
响应头必须带 always 参数
浏览器对带自定义 header 或非简单请求（如字体、带 Authorization 的 JS）会先发 OPTIONS 预检。Nginx 默认只在 2xx/3xx 响应中注入 add_header，而 return 204 是无 body 成功响应，不触发默认逻辑。不加 always，预检响应就缺头，前端直接报错。
add_header 'Access-Control-Allow-Origin' 'https://your-fe.com' always;add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type' always;- 如果前端不需要传 Cookie，
Access-Control-Allow-Origin可用*；一旦设了credentials: true，就必须写具体域名，不能混用
必须显式处理 OPTIONS 预检请求
浏览器不会把预检请求转发给后端——它只看 Nginx 是否响应。若没拦截，Nginx 可能返回 405（Method Not Allowed）或透传给后端（后端通常不实现 OPTIONS），导致跨域失败。
- 在同一个
location块内写：if ($request_method = 'OPTIONS') { ... return 204; } -
return 204前要重复写一遍所有关键 CORS 头，且都带always - 务必加：
add_header 'Content-Length' 0 always;和add_header 'Content-Type' 'text/plain; charset=utf-8' always;，避免旧浏览器解析空响应体出错
验证是否生效
改完配置后执行 nginx -t && nginx -s reload，再用以下方式确认：
- 用
curl -I https://yoursite.com/app.js查看响应头，确认含Access-Control-Allow-Origin - 手动发预检请求：
curl -I -X OPTIONS https://yoursite.com/font.woff2，检查是否返回 204 且头齐全 - 打开浏览器开发者工具 → Network → 找一个字体或 JS 请求 → 查看 Response Headers 栏
