Fetch请求指向localhost而非Swagger API的问题排查

以下是几个排查和解决方向：

1. 检查本地代理配置 #

如果你的前端项目（Vue/React/Angular等）配置了本地开发代理，会自动匹配特定路径的请求转发到localhost。比如：

• 查看Vue项目的vue.config.js、React项目的setupProxy.js、Webpack的devServer.proxy配置，是否存在将/api路径转发到http://localhost:8080的规则？
• 示例错误配置：

// Vue项目中的错误代理配置
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

解决：把代理的target修改为https://correct-path.com，或者注释掉该代理规则（如果不需要本地代理）。

2. 清除浏览器缓存与Service Worker干扰 #

• 打开浏览器开发者工具（F12），切换到Network面板，勾选「Disable cache」选项，刷新页面后重新测试
• 用无痕模式打开页面，避免缓存的旧代码或配置影响
• 如果项目使用了Service Worker，在开发者工具的Application面板找到Service Worker，点击「Unregister」后重启页面

3. 确认代码已生效 #

• 重启前端开发服务器或重新编译项目，确保修改后的fetch代码被加载
• 在开发者工具的Sources面板中找到对应的JS文件，确认fetch的URL确实是https://correct-path.com/api/v1/data，而非旧的localhost地址

4. 排查外部代理工具或服务器重定向 #

• 关闭本地运行的代理工具（如Nginx、Charles、Fiddler等），避免它们拦截转发请求
• 用Postman直接测试目标API地址，确认请求能正常发送到https://correct-path.com/api/v1/data，排除前端以外的因素

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