Nginx需为CSS等静态资源统一配置CORS响应头，通过location匹配文件类型并添加Access-Control-Allow-Origin等头；生产环境应避免使用通配符*，推荐动态反射可信域名，并正确处理OPTIONS预检请求。

要让 Nginx 正确为 CSS 文件（以及其他静态资源）配置跨域资源共享（CORS）响应头，关键不是单独“针对 CSS”，而是对匹配的静态资源路径统一设置 Access-Control-Allow-Origin 等头信息。CSS 本身不发起跨域请求，但页面加载 CSS 时若该 CSS 位于不同源（协议、域名、端口任一不同），浏览器会检查其响应头是否允许跨域加载——此时需服务端返回合法的 CORS 头。

明确哪些请求需要加 CORS 头

CSS 文件属于“简单请求”中的资源加载（GET 请求），只要满足以下任一条件，就需在响应中包含 Access-Control-Allow-Origin：

• HTML 页面由 A 域名加载，引用了 B 域名下的 .css 文件；
• 前端应用部署在 https://app.example.com，但 CSS 托管在 https://cdn.example.com；
• 开发环境使用本地 http://localhost:3000 访问后端 API 或静态资源服务（如 Nginx 本地托管 CSS），而资源服务未启用 CORS。

在 Nginx 中配置 CSS 等静态资源的 CORS 响应头

推荐在 location 块中按文件类型或路径匹配静态资源，并添加标准 CORS 头。例如：

（放在 server 或 location 块内）

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    add_header 'Access-Control-Max-Age' 86400;
<pre class="brush:php;toolbar:false;"># 处理预检请求（OPTIONS）
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Max-Age' 86400;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
}

}

注意：生产环境慎用 '*'，尤其当需携带凭据（如 cookies）时，必须指定具体域名且不能为通配符；此时应改用 $http_origin 动态反射（需额外判断）。

只对特定域名开放 CORS（更安全的做法）

若只允许 https://myapp.com 加载你的 CSS，可动态设置 Origin：

map $http_origin $cors_origin {
    default "";
    "~^https?://(myapp\.com|staging\.myapp\.com)$" "$http_origin";
}
<p>server {</p><h1>... 其他配置</h1><pre class="brush:php;toolbar:false;">location ~* \.(css|js|font)$ {
    add_header 'Access-Control-Allow-Origin' $cors_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $cors_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }
}

}

验证是否生效

重启 Nginx 后，用 curl 或浏览器开发者工具检查 CSS 响应头：

curl -I https://your-domain.com/style.css

确认输出中包含类似：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS

若仍报跨域错误，请检查：

• Nginx 配置是否已重载（nginx -s reload）；
• 浏览器缓存是否干扰（尝试无痕模式或禁用缓存）；
• 是否有其他中间件（CDN、反向代理）覆盖或删除了 CORS 头；
• 是否遗漏了 OPTIONS 预检处理（尤其在带自定义 header 时）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！