AWS负载均衡器下Angular应用出现JS MIME类型错误求助

核心问题分析 #

直接访问EC2实例正常，但通过应用负载均衡器（ALB）访问时出现JS MIME类型错误，本质是JavaScript文件的响应MIME类型被识别为text/plain，触发浏览器的安全校验拒绝执行。两种访问方式的差异，源于ALB的转发行为与Nginx的头部配置产生了冲突。

具体修复步骤 #

1. 移除手动指定的Content-Type规则 #

你的Nginx配置中已经引入了/etc/nginx/mime.types（包含标准MIME类型映射），但又手动给.js和.css文件设置了Content-Type，这会覆盖或干扰默认的标准映射。尤其是application/x-javascript属于过时的MIME类型，现代浏览器仅认可application/javascript作为JS文件的合法类型。

删除以下两段冗余配置：

location ~ \.css {
    add_header  Content-Type    text/css;
}

location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

2. 确认mime.types文件的标准映射 #

检查/etc/nginx/mime.types文件，确保包含以下正确的类型映射：

text/css                            css;
application/javascript              js;

如果缺失，手动添加后保存文件。

3. 检查ALB的压缩与头部转发配置 #

ALB的默认配置可能修改了响应头部或开启了压缩，导致Nginx返回的Content-Type被篡改：

• 登录AWS控制台，进入目标ALB的监听器配置，临时关闭"压缩"选项测试。
• 确认ALB的"转发头部"设置，确保未移除或修改Content-Type响应头。

4. 重启Nginx使配置生效 #

执行命令重启Nginx服务：

sudo systemctl restart nginx

验证方法 #

修改配置后通过ALB访问应用，打开浏览器控制台查看网络请求：

• 检查JS文件的响应头中Content-Type是否为application/javascript
• 确认不再出现'text/plain' is not a valid JavaScript MIME type错误

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