Angular+Spring Boot项目部署至Nginx Docker容器后PDF加载的MIME类型异常问题

看起来你遇到的问题有点迷惑——日志里提示的是JS模块的MIME类型错误，但你以为是PDF加载的问题。其实大概率是Nginx在处理PDF viewer依赖的JS文件时，返回了错误的MIME类型，导致浏览器拒绝加载模块，进而影响PDF的显示。我帮你梳理下问题根源和解决办法：

问题根源分析 #

错误日志明确指向：main-7X4J5JFT.js这个JS文件被服务器返回了application/octet-stream类型，而浏览器期望的是JavaScript模块脚本的MIME类型（通常是application/javascript）。这说明Nginx对静态JS资源的MIME类型配置出了问题，和你后端返回PDF的逻辑无关（后端已经正确设置了application/pdf类型）。

看你的nginx.conf，有两处可能的冲突：

1. 你定义了两个匹配JS文件的location块：一个是包含在静态资源组里的location ~* \.(?:...js...)，另一个是单独的location ~ \.js。Nginx的正则匹配是按定义顺序执行的，后者可能覆盖了前者的配置，而你给JS设置的application/x-javascript是旧类型，现代浏览器处理ES模块时需要标准的application/javascript。
2. 可能没有正确加载Nginx默认的mime.types文件，导致未知类型的资源都返回application/octet-stream。

具体解决步骤 #

1. 修正Nginx的MIME类型配置

修改你的nginx.conf，调整静态资源的MIME类型设置：

server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    # 先加载Nginx默认的MIME类型映射（关键！）
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }

    # 统一处理静态资源，明确指定JS和CSS的正确MIME类型
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|webmanifest|txt|xml)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
        # 明确覆盖JS和CSS的MIME类型，确保正确
        types {
            application/javascript js;
            text/css css;
        }
    }

    # 这个块是处理Nginx托管的静态PDF文件，对你从后端获取的PDF无影响，可以保留
    location ~* \.pdf$ {
        add_header Content-Type application/pdf;
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
    }

    # 删除原来单独的css和js location块，避免冲突
}

2. 确认Docker中的Nginx配置完整性

Nginx默认的主配置/etc/nginx/nginx.conf通常已经包含了include /etc/nginx/mime.types;，但如果你的自定义配置覆盖了这一点，一定要手动加上上面的include语句，确保标准MIME类型生效。

3. 重新构建并测试

修改配置后，重新构建Angular项目和Docker镜像：

docker build -t your-image-name .
docker run -p 80:80 your-image-name

启动后打开浏览器，检查控制台是否还有MIME类型错误，同时测试PDF加载是否正常。

额外说明 #

你后端返回PDF的代码是正确的——已经设置了application/pdf的Content-Type，并且用inline的Content-Disposition，前端用URL.createObjectURL处理Blob的逻辑也没问题。所以只要解决了JS模块的MIME类型问题，PDF应该就能正常显示了。

备注：内容来源于stack exchange，提问作者Jan Slager