Nginx1.23容器HTTPS代理React时CSS为text/plain样式不生效

CSS返回Content-Type: text/plain是因为Nginx没有正确加载MIME类型映射规则，具体原因：

• 你当前贴出的HTTPS版本nginx.conf的http块中，并没有添加include mime.types配置，仅把mime.types文件放在配置同目录但不在主配置中引入的话，规则不会生效
• 容器化部署的Nginx默认MIME映射文件路径通常为绝对路径/etc/nginx/mime.types，如果写相对路径，Nginx会从编译时内置的配置目录查找文件，大概率找不到映射文件
• 你提到HTTP配置下功能正常，就是因为之前的HTTP配置中正确引入了MIME规则，切换HTTPS重写配置时遗漏了该配置项

1. 修改nginx.conf，在http块最开头添加MIME映射引入和默认类型配置，优先使用绝对路径，修改后的完整配置参考：

events {
    worker_connections 1024;
}

http{
    # 新增以下两行配置加载MIME规则
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
            listen 443 ssl http2;
            server_name example.com;

            ssl_certificate /certs/certnew.cer;
            ssl_certificate_key /certs/private.key;

            ssl_session_cache shared:SSL:1m;
            ssl_session_timeout 10m;
            ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
            ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
            ssl_prefer_server_ciphers on;

            access_log  /var/log/nginx/access.log;
            error_log /var/log/nginx/error.log error;

            location / {
                root /usr/share/nginx/html;
                index index.html index.htm;
                try_files $uri $uri/ /index.html =404;
            }

            location /api/ {
                proxy_pass http://backend:8000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;

            }

            location /socket-traffic/ {
                proxy_pass http://backend:8001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
            }

            error_page 404 /404.html;
                location = /40x.html {
            }

            error_page 500 502 503 504 /50x.html;
                location = /50x.html {
            }

    }
}

如果配置校验时提示找不到mime.types文件，可在容器内执行find / -name mime.types查询文件实际存放路径，替换include后的路径即可。

2. 进入容器执行配置校验命令，确认配置无语法错误：
   nginx -t
   命令返回syntax is ok、test is successful即为校验通过。
3. 重载Nginx配置使规则生效：
   nginx -s reload

重载完成后按Ctrl+F5强制刷新页面清除缓存，重新请求CSS资源，响应头Content-Type会变为正确的text/css，样式即可正常加载。
问题现象参考截图：

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