在Nginx运维实践中,"配置了charset utf-8但CSS/JS仍然中文乱码"是最常见的字符集陷阱之一。其根源在于:Nginx的charset指令默认仅对text/html生效,而不会自动为其他文本MIME类型追加字符集声明。当浏览器收到没有charset参数的Content-Type: text/css响应头时,会回退到ISO-8859-1解析,UTF-8编码的中文内容随即变为乱码。
正确的做法是在http块中同时配置两条指令:charset utf-8;设定默认字符集,charset_types text/css text/plain application/javascript application/json text/xml;显式声明需要追加charset的MIME类型列表。配置后通过nginx -t && nginx -s reload平滑重载,再用curl -I验证响应头是否包含; charset=utf-8即可确认生效。
 
配置如下:
http {
    charset utf-8;
    #  关键:必须显式声明 CSS 类型需要追加 charset
    charset_types text/css text/plain application/javascript application/json text/xml;
    
    # ... 其他已有配置保持不变
}
 
需要特别强调的是,charset指令仅修改HTTP响应头,不会对响应体做任何转码操作。如果源文件本身不是UTF-8编码,必须先用iconv等工具转换文件编码,否则即使响应头正确,浏览器按UTF-8解析非UTF-8文件依然会乱码。此外,建议在HTML的<head>中保留<meta charset="utf-8">作为兜底保障,确保本地打开文件或CDN剥离响应头时仍能正确渲染。掌握charsetcharset_types的配合使用,是彻底解决Nginx静态资源中文显示问题的关键。
 
验证:
# 验证
curl -I "https://www.forasp.cn/static/css/style.min.css?v=3"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 05 Aug 2026 14:05:44 GMT
Content-Type: text/css; charset=utf-8
Content-Length: 30137
Last-Modified: Wed, 05 Aug 2026 14:02:05 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: "6a73425d-75b9"
Expires: Thu, 06 Aug 2026 02:05:44 GMT
Cache-Control: max-age=43200
Accept-Ranges: bytes
 看到 charset=utf-8 即可。