React生产环境跳转同域名其他服务器子路径失败问题求助

这问题我之前帮同事排查过类似的，核心原因主要是静态服务器的单页应用配置逻辑，当然Service Worker也可能凑过来添乱，咱们一步步拆解解决：

1. 先搞定静态服务器的路由转发问题 #

你用的serve -s build是单页应用模式，它的逻辑是：所有找不到对应静态文件的请求，都会自动转发到React的index.html。这就导致当你跳转/another-server时，serve服务器先接收到请求，发现build目录里没有这个路径的文件，直接把请求扔给了React的index.html，然后React路由没匹配到这个路径，就渲染了NotFound组件。而开发模式下的webpack-dev-server默认不会把所有请求都转发到index.html，所以你的请求能直接打到另一个服务上。

解决这个的关键是让服务器知道：/another-server开头的请求要转发到实际的另一个服务，而不是交给React处理。这里有两个可行方案：

方案A：换用Nginx（推荐） #

Nginx支持反向代理，配置起来很灵活。示例配置如下：

server {
  listen 443 ssl;
  server_name myserver.com;

  # 处理React静态资源，只有找不到文件时才返回index.html
  location / {
    root /path/to/your/react/build/folder;
    try_files $uri $uri/ /index.html;
  }

  # 把/another-server的请求转发到你的另一个服务地址
  location /another-server/ {
    proxy_pass https://your-actual-another-server-url/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

配置完重启Nginx，再测试跳转就正常了。

方案B：给serve加自定义配置（仅限简单场景） #

如果暂时不想换Nginx，serve@11+版本支持自定义serve.json配置文件，你可以创建一个排除/another-server的重写规则：

{
  "rewrites": [
    { "source": "!/another-server/**", "destination": "/index.html" }
  ]
}

然后运行serve -s build -c serve.json启动服务。不过这个方案只能让serve不把/another-server的请求转发到index.html，但没法自动转发到另一个服务——你得确保另一个服务已经在同一个域名的这个路径下正常运行，否则会返回404。

2. 排查Service Worker的干扰 #

如果上面的方法没用，再检查Service Worker的问题。create-react-app默认注册的Service Worker会缓存资源并拦截请求，可能会把/another-server的请求当成要缓存的路由处理。

临时禁用测试 #

先在src/index.js里注释掉Service Worker的注册代码：

// serviceWorkerRegistration.register(); // 注释掉这行

重新构建部署后测试跳转，如果正常，说明就是Service Worker的锅。

保留Service Worker的情况下修复 #

如果需要保留Service Worker，你得修改它的配置，让它不拦截/another-server的请求。create-react-app默认用Workbox，你可以用react-app-rewired或者craco来扩展配置，添加排除规则：
比如用craco的话，创建craco.config.js：

module.exports = {
  pwa: {
    workboxOptions: {
      exclude: [/^\/another-server\/.*$/],
    },
  },
};

这样Workbox生成的Service Worker就不会处理/another-server开头的请求了。

3. 应急小技巧：绕过客户端路由 #

如果暂时没法改服务器或Service Worker配置，也可以试试这两个小方法：

• 用window.location.replace()代替直接赋值：

  window.location.replace('/another-server');
  

• 允许的话，在新窗口打开链接：

  window.open('/another-server', '_blank');
  

不过这只是客户端层面的绕过，本质问题还是服务器配置，所以优先解决服务器的转发规则。

最后确认部署结构 #

先直接在浏览器访问https://myserver.com/another-server，如果显示的是React的NotFound页面，那肯定是服务器配置的问题，和React代码无关——得先确保这个路径能正常访问到你的另一个服务。

内容的提问来源于stack exchange，提问作者Dao Kieu Vi