前端调用GET请求时出现URL重复拼接问题该如何排查解决

可能的故障原因 #

• 前端请求基础地址配置错误：如果配置API baseURL时没有加HTTP/HTTPS协议前缀，浏览器会将其识别为相对路径，自动拼接当前页面的域名前缀，就会出现域名重复的情况。比如把baseURL设为example.app.com而不是https://example.app.com，当前页面域是example.app.com的话，请求就会拼接成example.app.com/example.app.com/xxx。
• 反向代理/Ingress配置错误：如果前端用了Nginx或者K8s Ingress做路径重写，重写规则配置失误，比如把请求的Host头直接拼到了请求路径前面，也会出现重复拼接的问题。
• 前端路由配置冲突：如果用了History模式的前端路由，没有做匹配规则兜底，当API请求路径被前端路由误识别为页面路径时，可能会触发异常路径拼接逻辑导致域名重复。
• 请求库拦截器逻辑错误：如果axios/fetch等请求库的全局请求拦截器里写了路径拼接逻辑，重复添加了域名前缀，也会触发该问题。
• 生产打包配置错误：如果前端打包时的publicPath参数被误设为完整域名而非/或者相对路径，也会导致接口和资源请求出现路径拼接错误。

排查步骤 #

• 第一步先核对前端API基础配置：找到请求库的baseURL配置项，确认是否带了完整的协议头，https://example.app.com是正确写法，不能省略协议直接写域名。
• 第二步验证本地开发场景是否复现：本地启动前端服务，用相同的接口配置发请求，如果本地也出现路径拼接问题，直接定位为前端代码问题，无需先查集群侧配置。
• 第三步查集群侧反向代理配置：如果本地没有复现，检查部署环境的Ingress/Nginx配置，比如Ingress的nginx.ingress.kubernetes.io/rewrite-target注解是否配置错误，或者Nginx的location块里的proxy_pass规则有没有多余的路径拼接逻辑。
• 第四步排查请求拦截器逻辑：在拦截器中打印处理完成后的完整请求URL，确认是否有代码逻辑重复添加了域名前缀。

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