部署在AWS ECS的Nginx容器出现MIME类型不匹配问题求助

我来帮你一步步梳理和解决这个问题。从你描述的症状来看，核心问题是JS文件返回404，而MIME类型不匹配（返回text/html）是404衍生的结果——因为Nginx找不到文件时，会返回默认的HTML格式错误页面，浏览器期望的是application/javascript类型，所以触发了X-Content-Type-Options: nosniff拦截。我们先解决404问题，MIME的问题自然会消失。

一、先确认文件是否正确部署到容器中 #

这是最常见的根源：Angular构建的文件根本没出现在Nginx指定的目录里。

1. 进入ECS容器检查文件
   用AWS ECS Exec工具进入运行中的容器（需要任务定义开启exec权限）：

   aws ecs execute-command --cluster <你的集群名> --task <任务ID> --container <容器名> --interactive --command "/bin/sh"
   

   然后查看Nginx根目录的文件：

   ls -la /usr/dist/nginx/html
   

   你应该能看到index.html、runtime.js、polyfills.js这些Angular构建产物。如果看不到：
   • 先在本地执行ng build，检查dist/payload-ng目录下是否有这些文件，确认Angular构建过程正常。
   • 修改Dockerfile的复制命令，确保源路径正确（注意末尾的斜杠，避免创建多余子目录）：

     # 修正复制路径，确保将dist/payload-ng内的文件复制到目标目录
     COPY ./dist/payload-ng/ /usr/dist/nginx/html/
     

二、检查Angular的base-href配置 #

如果Angular应用部署在非根路径（比如/payload-ng/），但构建时没指定base-href，会导致浏览器请求的JS路径和Nginx实际文件路径不匹配。

1. 确认构建命令
   如果部署在根路径，构建命令应该是：

   ng build --prod --base-href /
   

   如果部署在子路径（比如/payload-ng/），需要加上对应的base-href：

   ng build --prod --base-href "/payload-ng/"
   

2. 同步Nginx配置
   如果用了子路径，需要调整Nginx的location规则，匹配对应的路径：

   server {
       listen 80;
       server_name localhost;
       root /usr/dist/nginx/html;
       index index.html;
   
       # 匹配子路径
       location /payload-ng/ {
           try_files $uri$args $uri$args/ /payload-ng/index.html;
           add_header Cache-Control 'max-age=86400';
           include /etc/nginx/security-headers.conf;
       }
   
       # 匹配子路径下的JS/CSS文件
       location ~ ^/payload-ng/.*\.css$|^/payload-ng/.*\.js$ {
           add_header Cache-Control 'max-age=31449600';
           include /etc/nginx/security-headers.conf;
       }
   
       # 匹配子路径下的index.html和JSON文件
       location ~ ^/payload-ng/index.html|^/payload-ng/.*\.json$ {
           expires -1;
           add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
       }
   }
   

三、验证Nginx配置的正确性 #

1. 检查配置语法
   在容器内执行命令验证Nginx配置是否合法：

   nginx -t
   

   如果有语法错误或路径错误，根据提示修正即可。
2. 确认MIME类型配置
   你的mime.types文件已经正确配置了application/javascript js;，所以只要文件存在，Nginx会自动返回正确的Content-Type，无需额外修改。

四、额外排查点 #

• 检查ECS任务定义的端口映射：确保容器的80端口正确映射到负载均衡器的监听端口。
• 检查负载均衡器的目标组：确认目标组的健康检查正常，流量能正确转发到ECS容器。

只要确保文件正确部署、路径匹配，404问题解决后，MIME类型的错误就会自动消失，脚本也能正常加载了。

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