React生产环境刷新/手动输入URL资源找不到问题求助

问题根源在于React是单页应用（SPA）：应用内跳转是通过前端JS处理的路由（不会向服务器发起新请求），但直接在URL输入路由路径时，浏览器会向Nginx发起对应路径的GET请求。Host1的静态文件服务器没有对应/app/users这类路径的物理文件，因此返回404错误。

无需逐个配置路径映射，只需调整Host2的Nginx配置，让所有前端路由请求都转发到React的入口文件index.html，由React接管路由处理。以下是适配场景的完整配置：

# 优先处理API请求（假设API路径前缀为/api，可根据实际修改）
location /api/ {
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass https://host1:8444/api/;
}

# 处理React静态资源（js、css、图片等），添加缓存优化性能
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass https://host1:8444/;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# 所有其他请求（前端路由）转发到React入口文件，由前端路由处理
location / {
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass https://host1:8444/index.html;
}

配置说明 #

1. API请求匹配：将带/api/前缀的请求直接代理到Host1的API服务，确保接口正常响应。
2. 静态资源匹配：单独匹配静态资源文件，添加缓存规则减少重复请求，提升加载速度。
3. 前端路由 fallback：所有未匹配到API或静态资源的请求，都转发到React的index.html。此时Host1返回入口文件，React的JS会根据URL中的路径渲染对应页面，解决直接输入路由的404问题。

额外注意：React应用构建时，需在package.json中设置"homepage": "/"，确保静态资源路径正确生成。

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