React应用部署在重定向服务器后资源加载异常及设置homepage后语法错误的排查求助

看起来你遇到的是典型的React部署在子路径下的资源路径匹配问题，以及后续因反向代理配置不当导致的资源返回错误。我来一步步帮你拆解解决：

第一个问题：静态资源路径缺失（404） #

当你把React应用部署在https://server-preprod/myapplication这样的子路径下时，React默认会把静态资源的请求路径设为根目录（比如/static/chunk.css），但反向代理并没有把根目录下的/static请求转发到你的应用服务器，而是直接在代理服务器的根目录查找，自然会返回404。

你设置homepage字段的思路是完全正确的，这个配置会告诉React在构建时把所有静态资源的路径前缀设为你指定的子路径，这样请求就会变成https://server-preprod/myapplication/static/chunk.css——这一步已经解决了路径问题，但新的语法错误是另一个核心原因导致的。

第二个问题：Uncaught SyntaxError: Unexpected token '<' #

这个错误几乎可以肯定是浏览器请求JS/CSS文件时，服务器返回的是你的React应用首页（index.html），而不是对应的静态资源文件。当浏览器尝试解析HTML内容为JS代码时，遇到<符号就会抛出语法错误。

导致这个问题的核心原因是反向代理的配置没有正确映射子路径下的所有请求，具体来说：

• 当请求https://server-preprod/myapplication/时，代理正确转发到了http://myapi:3000，返回了index.html
• 但当请求https://server-preprod/myapplication/static/xxx.js时，代理没有正确转发到http://myapi:3000/static/xxx.js，反而被代理服务器的路由或者你的pm2 serve配置当成了不存在的路径，返回了index.html作为SPA的 fallback

具体解决方案 #

1. 修正反向代理配置（以Nginx为例，其他代理工具思路类似）

你需要确保代理服务器把所有以/myapplication开头的请求，都转发到http://myapi:3000，并且去掉前缀/myapplication后转发到目标服务器。比如Nginx的配置应该是这样：

location /myapplication {
    proxy_pass http://myapi:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;

    # 关键：把/myapplication/xxx重写为/xxx，转发到目标服务器
    rewrite ^/myapplication/(.*)$ /$1 break;
}

这个rewrite规则会把请求路径中的/myapplication前缀去掉，确保目标服务器（pm2 serve）能正确匹配到静态资源。

2. 验证React构建配置

虽然你已经设置了homepage，也可以尝试用环境变量PUBLIC_URL来构建，有时候这种方式更直观灵活：

PUBLIC_URL=/myapplication npm run build:preprod

构建完成后，打开build/index.html，检查里面的静态资源路径是否正确（比如<script src="/myapplication/static/js/main.xxx.js"></script>）。

3. 确认pm2 serve的配置

你的pm2命令pm2 serve build 3000 --name "myApplication" --spa是正确的，--spa参数会把所有404请求转发到index.html，这对React的路由是必要的，但前提是代理服务器已经正确把路径转发过来。

验证步骤 #

1. 重新构建React应用（如果用了PUBLIC_URL的话）
2. 更新反向代理配置并重启服务
3. 访问https://server-preprod/myapplication，打开浏览器开发者工具（F12），查看Network标签：
   • 检查所有静态资源（JS/CSS）的请求路径是否正确，状态码是否为200
   • 如果状态码是200但仍然报错，查看响应内容是否是对应的资源文件，而不是index.html

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