部署于Nginx反向代理后的React SPA非根路径直接访问返回404求助

问题根因 #

你之前的配置存在两个核心错误：

• try_files 配置放错了位置：外层反向代理Nginx的职责是把请求转发到内层SPA容器，本身不存放静态文件，你在外层location /里加try_files完全不会生效，正确的配置应该写在内层跑SPA的Nginx容器里。
• 你之前写的try_files $ uri $ uri / /index.html = 404存在语法错误，变量和符号之间不能加空格，而且SPA场景下不需要最后跟=404，所有找不到的路径都要fallback到index.html。
• 额外问题：你代码里用的是BrowserRouter，但实际访问路径带#，说明路由模式存在不一致问题，不过这个不是404的直接诱因，后面可以一起调整。

具体修改步骤 #

步骤1：给内层SPA容器添加正确的Nginx配置 #

你现在的Dockerfile直接用了官方Nginx镜像的默认配置，没有适配SPA路由，你需要在项目里新增一个nginx.conf配置文件，内容如下：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 适配SPA非根路径路由
    location /platform/ {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置（可选，提升加载速度）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

然后修改你的Dockerfile，把这个自定义配置覆盖到容器内的Nginx配置目录：

FROM node:14-buster as build
WORKDIR /src
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:1.21.1
WORKDIR /usr/share/nginx/html
COPY --from=build /src/build /usr/share/nginx/html
# 新增这行，把自定义配置替换默认的Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

步骤2：调整外层反向代理配置（可选，清理无效配置） #

你外层反向代理的crm.conf里不需要加try_files，把之前注释掉的那行删掉就行，现在的转发逻辑是正确的，不需要修改其他配置。

步骤3：修正React路由模式不一致问题（可选，解决路径带#的问题） #

你代码里用的是BrowserRouter，正常生成的路径不会带#，现在路径带#说明你可能在App组件里又嵌套了HashRouter，或者路由配置存在冲突。如果要保留Hash模式，可以把index.tsx里的BrowserRouter改成HashRouter，如果要使用无#的Browser模式，确保整个应用只有一个Router，且没有额外的Hash路由配置即可。

验证 #

重新构建SPA镜像并重启容器，再直接访问非根路径就不会返回404了，Nginx会把所有/platform/开头的请求都转发到index.html，由React路由接管渲染对应的页面。

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