直接在Nginx的location块中为静态资源路径精准添加CORS响应头并处理OPTIONS预检请求，可安全支持外部域名加载JS、CSS、字体等资源；需用正则匹配后缀、所有add_header带always参数、单独if拦截OPTIONS返回204。
直接在 Nginx 的 location 块中为静态资源路径精准添加 CORS 响应头，并显式处理 OPTIONS 预检请求，就能让外部域名安全加载 JS、CSS、字体、图片等资源。核心是“路径准、头部全、预检稳”，不依赖后端，也不污染无关路由。
只对静态资源路径加 CORS 头
避免在 http 或 server 块里全局配置，防止误开非目标接口的跨域权限。推荐用正则匹配常见静态后缀：
location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg|ico)$ { }- 这个规则覆盖前端实际用到的资源类型，字体（.woff2/.ttf）尤其容易因缺头被拦截
- 确保你的资源文件真实落在该 location 能匹配的路径下（如
/static/app.js或根目录下的/main.css）
必须设置的关键响应头
在上述 location 块内添加以下指令，全部带 always 参数，否则 304、404 等非 2xx 响应会丢失 CORS 头：
-
add_header 'Access-Control-Allow-Origin' 'https://trusted-frontend.com' always;（若无需 Cookie，可用'*'；但不可与Access-Control-Allow-Credentials true同时用*） -
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;（对字体断点续传、分片加载很重要）
单独处理 OPTIONS 预检请求
浏览器加载字体或带自定义 header 的 JS/CSS 时，一定会先发 OPTIONS 请求。Nginx 默认不响应，会导致跨域失败：
- 在同一个 location 块里加：
if ($request_method = 'OPTIONS') { - 里面重复写关键头（Origin、Methods、Headers），同样带
always -
add_header 'Content-Length' 0;和add_header 'Content-Type' 'text/plain; charset=utf-8'; - 最后
return 204;（不能用 200，部分客户端会解析异常）
验证是否生效
修改后执行 nginx -s reload，再检查：
- 用
curl -I -H "Origin: https://trusted-frontend.com" https://your-domain.com/app.js，确认响应含Access-Control-Allow-Origin - 手动触发预检：
curl -X OPTIONS -I https://your-domain.com/static/icon.woff2，看是否返回 204 且带全 CORS 头 - 打开浏览器控制台，加载页面后观察是否还有 “Blocked by CORS policy” 报错
