Webpack代理配置异常：请求地址被替换为index.html导致跨域失败

嘿，我来帮你捋捋这个问题——请求被莫名替换成index.html的情况我之前也碰到过，结合你的配置来看，大概率是前端路由拦截或者代理配置没生效导致的，给你几个具体的排查方向：

1. 前端路由的兜底规则“抢”走了请求 #

如果你的项目用了history模式的路由，当请求路径（比如/api/login）没匹配到任何路由时，路由会自动兜底重定向到index.html，直接把代理请求给覆盖了。

• 怎么查：去看你的路由配置文件，有没有类似{ path: '*', redirect: '/index.html' }或者{ path: '*', component: NotFound }的规则，而且这个规则的优先级还比代理高。
• 怎么解决：调整路由顺序，让/api开头的路径不被兜底规则捕获。比如在Vue Router里可以这么改：

  const router = new VueRouter({
    mode: 'history',
    routes: [
      // 先放你的业务路由
      // ...
      // 最后放兜底规则，过滤/api路径
      {
        path: '*',
        beforeEnter: (to, from, next) => {
          if (to.path.startsWith('/api')) {
            // 放行给代理处理
            next(false);
          } else {
            next('/index.html');
          }
        }
      }
    ]
  })
  

2. 代理配置根本没生效 #

你说改了webpack.dev.conf.js的devServer配置，但可能有这些细节没注意到：

• 配置加载路径不对：如果是用Vue-Cli旧版本（比如2.x），proxyTable是在config/index.js里配置的，不是直接改webpack.dev.conf.js；而且要确认启动脚本是指向正确的配置文件，比如package.json里的dev命令是不是"webpack-dev-server --config webpack.dev.conf.js"。
• 配置层级错了：要确保proxy是devServer下的一级属性，别嵌套错了，正确结构应该是：

  devServer: {
    port: 8080,
    open: true,
    // 代理配置要在这里
    proxy: {
      '/api': {
        target: 'http://47.106.74.67:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '/' }
      }
    }
  }
  

• 路径重写的正则问题：你的pathRewrite是把^/api换成/，如果请求是/api/login/（带末尾斜杠），可能匹配不上？可以试试把正则改成^/api/，或者直接写成{'^/api': ''}。

3. 请求写法错了，跳过了代理 #

如果你的请求写的是绝对路径http://localhost:8080/api/login，而不是相对路径/api/login，那代理根本不会处理这个请求——因为proxy只负责拦截相对路径的请求。这时候前端服务找不到/api/login这个静态资源，就会被路由兜底到index.html。

• 怎么查：看你的请求代码，比如axios的baseURL是不是设成了'http://localhost:8080/api'，而不是'/api'或者空字符串。
• 怎么解决：改成相对路径发起请求，比如：

  // 正确写法
  axios.post('/api/login', loginData)
  

4. 浏览器缓存在搞鬼 #

有时候浏览器会缓存旧的页面或者路由规则，导致新的代理配置不生效。

• 怎么解决：直接按Ctrl+F5强制刷新页面，或者打开开发者工具的Network面板，勾选Disable cache选项，再重新发起请求试试。

额外的小检查 #

• 看看webpack-dev-server的启动日志，正常加载代理的话，会输出类似[HPM] Proxy created: /api -> http://47.106.74.67:8080的内容，要是没看到这条日志，说明代理配置根本没被加载。
• 如果你用了Mock工具（比如mockjs），查查有没有拦截/api/login的mock规则，要是有的话，请求会被mock拦截，不会走到代理那一步。

内容的提问来源于stack exchange，提问作者伍峻贤