使用代理时部分接口请求返回index.html的问题求助

问题分析 #

你的代理配置对/api/playgrounds请求生效，但/api/playground/{UUID}请求未到达后端，返回前端的index.html文件。核心原因是该请求未被代理规则正确匹配，被前端SPA的 fallback 机制接管。

解决方案 #

1. 调整代理目标与路径重写规则 #

当前代理的target指向具体子路径，导致路径重写后生成的目标URL不符合后端接口预期，还可能引发路径层级匹配歧义。修改代理配置如下：

{
  "/api": {
    "target": "http://localhost:8080/v1/api",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

• 将target调整到后端API根路径/v1/api，而非playground子路径
• 所有/api开头的请求会被统一代理，重写后路径完全匹配后端接口结构：
  • /api/playgrounds → http://localhost:8080/v1/api/playgrounds（与原正常请求一致）
  • /api/playground/{UUID} → http://localhost:8080/v1/api/playground/{UUID}（匹配后端接口）

2. 规范请求路径的拼接方式 #

当前请求路径的结尾斜杠可能导致多余层级，建议统一拼接逻辑：

private apiUrl = '/api/playground';
const response = await fetch(`${this.apiUrl}/${this.playgroundId}`);

3. 确认代理优先级高于前端路由Fallback #

如果前端使用history模式路由（如Vue Router、React Router），代理规则默认会优先于服务器的history fallback处理请求，无需额外配置，但需保证代理路径匹配规则无歧义。

4. 借助代理日志排查问题 #

通过logLevel: "debug"输出的日志确认请求状态：

• 若日志无该请求的代理记录：说明匹配规则不生效，可尝试将/api/*改为/api
• 若日志显示目标URL错误：说明路径重写或target配置有误，按方案1修正即可

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