Nginx反向代理返回乱码JS/CSS问题求助

可能原因与对应方案 #

1. 未正确传递客户端编码请求头 #

后端服务器通常根据Accept-Encoding头返回匹配的资源编码，代理时如果丢失这个头，后端可能返回浏览器无法解析的编码格式。

修改配置：在location /块中添加：

proxy_set_header Accept-Encoding $http_accept_encoding;

2. Nginx自动修改了响应编码头 #

如果后端已经返回编码后的资源，Nginx可能二次处理导致头与实际内容不匹配，此时需要禁止Nginx干预编码相关的响应头。

修改配置：替换上述Accept-Encoding配置为：

proxy_set_header Accept-Encoding "";
proxy_ignore_headers Content-Encoding;

这会强制后端返回未编码的原始资源，避免解析冲突。

3. Host头不匹配导致后端返回异常内容 #

代理时设置了Host $host（即wut.*域名），而直接访问后端时用的是IP作为Host，部分后端服务会根据Host返回不同编码的资源。

两种调整方式：

• 改为传递后端实际Host：

  proxy_set_header Host 10.10.1.60;
  

• 保留当前Host，同时添加转发头让后端识别：

  proxy_set_header X-Forwarded-Host $host;
  

4. 静态资源Content-Type被错误识别 #

如果CSS/JS的Content-Type响应头被错误设置（比如被识别为text/html），浏览器会按HTML解析导致乱码。可以针对静态资源单独指定Content-Type：

添加单独的location块：

location ~* \.(css|js)$ {
    proxy_pass http://10.10.1.60;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Accept-Encoding $http_accept_encoding;
    # 强制设置正确的Content-Type
    add_header Content-Type "text/css; charset=utf-8" if ($uri ~* \.css$);
    add_header Content-Type "application/javascript; charset=utf-8" if ($uri ~* \.js$);
}

修改后的完整配置示例 #

server {
    listen 80;
    server_name wut.*;

    location / {
        proxy_pass http://10.10.1.60/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Accept-Encoding $http_accept_encoding;
    }

    location ~* \.(css|js)$ {
        proxy_pass http://10.10.1.60;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Accept-Encoding $http_accept_encoding;
        add_header Content-Type "text/css; charset=utf-8" if ($uri ~* \.css$);
        add_header Content-Type "application/javascript; charset=utf-8" if ($uri ~* \.js$);
    }
}

内容的提问来源于stack exchange，提问作者somedude