Angular项目ng build --prod部署Nginx后Assets转text/html问题

我之前部署Angular项目到Nginx时也踩过这个坑！问题根源基本都是Nginx的MIME类型配置没到位，导致它没法正确识别assets里的图片、PDF这类静态资源，只能默认返回text/html的Content-Type。下面是我亲测有效的解决步骤：

1. 检查Nginx的MIME类型配置 #

首先确保Nginx加载了默认的MIME类型映射文件，这个文件里包含了绝大多数常见文件类型的Content-Type规则。打开你的Nginx主配置文件（通常是/etc/nginx/nginx.conf），确认顶部有以下配置：

include /etc/nginx/mime.types;
default_type application/octet-stream;

• include mime.types：引入官方预设的MIME类型集合，比如.jpg对应image/jpeg、.pdf对应application/pdf；
• default_type application/octet-stream：作为兜底配置，如果某个文件类型不在mime.types里，会返回二进制流类型，而不是默认的text/html。

2. 配置正确的server块规则 #

接下来在你的Angular项目对应的server配置块里（比如/etc/nginx/sites-available/your-app.conf），设置好静态资源根目录和路由规则，确保Nginx能正确处理assets资源：

server {
    listen 80;
    server_name your-domain-or-ip; # 替换成你的域名或服务器IP

    root /var/www/your-angular-dist; # 指向Angular打包后的dist文件夹根路径
    index index.html;

    # 处理Angular单页应用路由：优先返回实际存在的文件，不存在则重写到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 优化assets资源的处理（可选但推荐）
    location /assets/ {
        expires 30d; # 设置30天缓存，提升加载速度
        add_header Cache-Control "public, no-transform";
    }
}

关键的点是try_files这条规则：当用户请求某个路径时，Nginx会先检查这个路径对应的文件是否存在（比如/assets/logo.png），如果存在就直接返回该文件（此时会根据mime.types设置正确的Content-Type）；如果不存在，才会重写到index.html处理Angular的路由。

3. 验证配置并重启Nginx #

配置完成后，先验证Nginx配置是否合法：

sudo nginx -t

如果提示test is successful，就重启Nginx生效：

sudo systemctl restart nginx

最后可以用curl命令测试资源的Content-Type是否正确：

curl -I http://your-domain-or-ip/assets/sample.pdf

看返回头里的Content-Type是不是application/pdf，而不是text/html就说明问题解决了。

另外还要确认一下Angular打包后的assets文件路径是否正确：执行ng build --prod后，assets目录下的文件应该都在dist/assets里，没有路径错误。

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