Nginx如何配置多个别名路径指向同一份react应用的index.html且不触发浏览器下载？

问题根因 #

浏览器触发自动下载index.html，核心是Nginx返回的Content-Type响应头被设置为了application/octet-stream等非text/html类型，或者SPA路由回退规则配置错误。

正确配置方案 #

1. 确认全局MIME类型配置 #

首先保证Nginx全局配置中引入了mime.types，用于自动识别静态资源类型：

http {
    # 必须引入，用于映射文件后缀和对应的Content-Type
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    # 其余全局配置保持默认即可
}

2. Server块路由配置 #

在对应站点的server块中配置路由回退规则，所有/app/开头的路径全部回退到index.html，同时强制指定html文件类型：

server {
    listen 80;
    server_name 你的站点域名/IP;
    # 替换为你React项目build后文件夹的实际路径
    root /data/your-react-project/build;
    index index.html;

    # 匹配所有/app/前缀的路由
    location /app/ {
        # 优先匹配真实存在的静态资源，不存在则返回index.html交给前端路由处理
        try_files $uri $uri/ /index.html;
        # 强制指定index.html的返回类型，避免被识别为二进制文件触发下载
        add_header Content-Type "text/html; charset=utf-8";
    }

    # 可选配置：静态资源长期缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 365d;
        add_header Cache-Control "public, immutable";
    }
}

3. 配置生效验证 #

• 执行nginx -t检查配置语法是否正确，确认返回test is successful
• 执行nginx -s reload重载Nginx配置
• 清除浏览器缓存后访问目标路径验证效果

额外注意事项 #

如果你的React应用实际部署在/app子路径下，打包前需要修改项目路径配置：

• 使用create-react-app的项目，在package.json中添加配置："homepage": "/app"
• 使用Vite的项目，在vite.config.js/ts中添加配置：base: "/app"

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