Nginx容器部署AWS后CSS报MIME类型为text/html无法加载如何解决

问题根因与解决方案 #

根因说明 #

MIME类型报错的本质是Nginx未找到对应路径的css、js静态资源，错误返回了index.html的内容（MIME类型为text/html），触发了浏览器的严格MIME校验规则；503状态码大概率和资源匹配失败、或AWS上层负载均衡健康检查异常有关。

具体修复步骤 #

• 第一步：调整Nginx配置的location匹配顺序与规则
  Nginx正则匹配规则会按照配置文件中的书写顺序生效，需要将静态资源匹配规则放在location /之前，避免静态资源请求被错误 fallback 到index.html，修改后的核心配置片段如下：

  # 注意：所有正则location要放在前缀location /之前
  # Media: images, icons, video, audio, HTC
  location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
  }
  
  # Javascript and CSS files
  location ~* \.(?:css|js)$ {
      root /usr/share/nginx/html;
      try_files $uri =404;
      expires 1y;
      access_log off;
      add_header Cache-Control "public";
  }
  
  # Any route containing a file extension (e.g. /devicesfile.js)
  location ~ ^.+\..+$ {
      try_files $uri =404;
  }
  
  location / {                
      try_files $uri $uri/ /index.html;
  }
  

  原有配置中location /的try_files补充$uri/逻辑，可避免目录路径匹配异常。
• 第二步：验证Docker镜像内静态文件是否正确拷贝
  本地构建镜像后启动测试容器，执行以下命令确认静态资源存在，避免构建上下文错误导致资源缺失：

  docker exec -it <你的容器名> ls /usr/share/nginx/html/static/css
  docker exec -it <你的容器名> ls /usr/share/nginx/html/static/js
  

  若提示目录不存在，检查Dockerfile中COPY ./build/ /usr/share/nginx/html 对应的build目录是否在构建上下文的正确路径中。
• 第三步：排查AWS负载均衡503问题
  若修改配置后仍有503报错，检查AWS集群上层的负载均衡（ALB/NLB）健康检查配置，确保健康检查路径返回200状态码，避免负载均衡认为后端实例异常，无法正常转发流量。

验证方法 #

修改配置重新构建镜像部署后，直接访问静态资源路径（如https://你的域名/static/css/main.xxxx.chunk.css），若能正常返回css内容，无MIME报错即为修复成功。

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