<p>直接在 Nginx 的 location 块中添加标准 CORS 响应头并显式处理 OPTIONS 预检请求，就能让 JS、CSS、字体、图片等静态资源被其他域名安全加载；需用正则精准匹配资源类型（如 location ~* .(js|css|woff2|ttf|png)$</code>），配置 <code>add_header ... always</code>、指定具体 Origin、禁用 <code>*</code> 与 <code>Credentials</code> 混用，并在 <code>if ($request_method = 'OPTIONS') 中重复关键头且 return 204。</p>
直接在 Nginx 的 location 块中添加标准 CORS 响应头，并显式处理 OPTIONS 预检请求，就能让 JS、CSS、字体、图片等静态资源被其他域名安全加载。关键不是加头就行，而是头要全、预检要稳、路径要准。
给静态文件路径单独配 CORS 头
不要在 server 或 http 全局块里加，容易误伤非目标路径。推荐用正则匹配具体资源类型，比如：
- location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|svg)$ { } —— 精准作用于前端常用静态资源
- 里面写 add_header 指令，必须带 always 参数，否则某些返回码（如 304）会丢失头
- Origin 值建议写具体域名（如
'https://your-app.com'），避免和 Credentials 同时用通配符 *
必须处理 OPTIONS 预检请求
浏览器加载字体或带自定义 header 的 JS/CSS 时，会先发 OPTIONS 请求。Nginx 默认不响应，导致跨域失败。
- 在同一个 location 块内加：
if ($request_method = 'OPTIONS') { return 204; } - return 204 前要重复写一遍关键 CORS 头（Origin、Methods、Headers），且同样带 always
- 务必加
add_header 'Content-Length' 0;，否则部分客户端会解析失败
字体和图片跨域特别注意
.woff2、.ttf、.eot 等字体文件，哪怕本地 file:// 页面加载也会触发 CORS 校验，90% 加载失败是因为缺 Access-Control-Allow-Origin。
- 确保这些后缀被上面的正则 location 覆盖到
- 如果前端不需要传 Cookie，就别设
Access-Control-Allow-Credentials true，这样才可以用 * 安全放行 - 搭配
Access-Control-Expose-Headers 'Content-Length, Content-Range'，对字体断点续传更友好
验证配置是否生效
改完 reload nginx 后，用 curl 或浏览器开发者工具检查响应头：
- 访问一个 .js 或 .woff2 文件，看响应里是否有
Access-Control-Allow-Origin - 手动发个 OPTIONS 请求：
curl -X OPTIONS -I https://yoursite.com/static/app.js，确认返回 204 且含 CORS 头 - 打开控制台，看是否还有 “has been blocked by CORS policy” 报错
