在Nginx中为静态资源配置CORS需在location块中添加Access-Control-Allow-Origin等响应头，并单独处理OPTIONS预检请求返回204，禁用Credentials与通配符混用，优先作用于具体路径而非全局。
直接在 Nginx 配置中添加标准 CORS 响应头，就能让浏览器允许前端页面从不同源加载你的静态资源（如 JS、CSS、字体、图片等），无需后端参与。关键在于响应头要完整、预检请求要显式处理，且不能对 Credentials 和通配符混用。
给静态资源目录加跨域头
如果你用 Nginx 直接托管 HTML、JS、CSS 等文件（比如 root /var/www/my-app;），而这些资源被其他域名的页面通过 <script src="https://other.com/app.js"> 或 fetch() 加载，就需要在对应 location 块里注入 CORS 头：
- 在
location / { }或更精确的路径（如location ~* \.(js|css|woff2|ttf|png)$ { }）中添加以下指令： -
add_header 'Access-Control-Allow-Origin' 'https://trusted-frontend.com' always;（禁止用*+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 预检请求
当浏览器发起带自定义头（如 Authorization）或非简单方法的请求时，会先发一个 OPTIONS 请求探路。Nginx 默认不响应它，会导致 502 或空响应失败：
- 在同一个 location 块内，加一段
if ($request_method = 'OPTIONS') { ... return 204; } - 里面要重复写一遍
Access-Control-Allow-Origin等关键头（always参数确保它们不被覆盖） - 务必设置
Content-Length 0和return 204，避免返回 body 导致协议错误
注意静态资源的特殊性
和 API 接口不同，静态资源一般不涉及 Cookie 或身份凭证，所以多数情况下可简化配置：
- 如果前端不要求携带 Cookie，可把
Access-Control-Allow-Credentials去掉，这样就能安全使用'*'作为 Origin - 字体文件（.woff2、.ttf）跨域加载失败，90% 是因为缺少
Access-Control-Allow-Origin—— 浏览器强制校验，连本地 file:// 页面也会报错 - 避免在
http或server全局块里加 CORS 头，容易污染非目标路径；优先放在具体location下
验证是否生效
改完配置后，重载 Nginx（nginx -s reload），然后用 curl 检查响应头：
curl -I -H "Origin: https://trusted-frontend.com" https://your-static-domain.com/main.js- 确认返回里包含
Access-Control-Allow-Origin: https://trusted-frontend.com等字段 - 再试
curl -X OPTIONS -I -H "Origin: https://trusted-frontend.com" -H "Access-Control-Request-Method: GET" https://your-static-domain.com/main.js，应返回 204 且含 CORS 头
