Nginx配置proxy_pass导致React应用报Uncaught SyntaxError: Unexpected token '<'错误

问题根因 #

你遇到的Unexpected token '<'报错本质是：浏览器请求JS、CSS、manifest等静态资源时，服务端返回了HTML内容（通常是404页面或SPA应用的兜底index.html），JS解析器识别到HTML开头的<符号不符合JS语法规则，因此抛出异常。

具体到你的场景，有两个核心配置问题导致locA访问异常：

1. /locA的代理转发规则未移除路径前缀：当前配置下公网请求/locA/one-page会被完整转发到上游服务的/locA/one-page路径，但你的上游服务实际路由是/one-page，不存在/locA前缀路由，上游返回404页面或SPA兜底页。
2. locA对应的SPA应用缺少子路径适配规则，且前端打包大概率未配置子路径前缀，静态资源请求会落到根路径，返回locB的跳转逻辑或404页面。

具体修改方案 #

不需要修改根路径的现有配置，仅调整/locA对应的location块即可：

1. 修改代理转发规则，移除路径前缀 #

将location /locA块内的proxy_pass配置末尾添加斜杠，Nginx会自动移除匹配到的/locA前缀再转发：

# 原配置
# proxy_pass http://192.168.1.100:1300;
# 修改为
proxy_pass http://192.168.1.100:1300/;

2. 在/locA块内添加SPA路由兜底规则 #

在location /locA块末尾添加如下配置，适配前端路由的刷新场景，不会影响根路径的locB跳转逻辑：

location /locA {
    # 保留你原有其他proxy配置不变
    # 新增如下规则
    try_files $uri $uri/ /locA/index.html;
}

3. 适配前端打包配置（必做） #

修改locA对应前端项目的打包参数：

• Vue项目：在vue.config.js中配置publicPath: '/locA/'
• React项目：在package.json中配置homepage: '/locA'
• Vite项目：在vite.config.js中配置base: '/locA/'
  配置后重新打包上线，前端生成的所有静态资源引用路径会自动带上/locA前缀，避免请求落到根路径。

补充说明 #

• locB访问正常的原因是其前端打包时已经配置了正确的/locB路径前缀，或上游服务本身就适配了/locB路由前缀，因此不存在路径匹配问题。
• 额外注意你的443 server块内有ssl off配置，和listen 443 ssl冲突，建议删除ssl off这行，避免SSL配置异常。

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