vue.config.js配置问题：请求重定向异常导致404错误

当访问/backend路径时，请求经代理重写为/api后返回404错误，当前vue.config.js配置如下：

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '^/backend': {
        target: 'https://address1',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/backend': '/api' },
        logLevel: 'debug',
      },
      '^/api': {
        target: 'https://address2',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/api': '/api' },
        logLevel: 'debug',
      },
    },
  },
})

问题原因 #

请求/backend/xxx被第一个代理规则处理后，路径被重写为/api/xxx，该路径会触发第二个^/api的代理规则，导致请求被转发到https://address2而非预期的https://address1。如果address2上没有对应接口，就会返回404错误。

解决方法 #

方法1：阻止二次代理

在/backend的代理配置中添加bypass函数，确保重写后的请求直接转发到目标地址，不再触发其他代理规则：

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '^/backend': {
        target: 'https://address1',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/backend': '/api' },
        logLevel: 'debug',
        bypass: (req, res, proxyOptions) => {
          // 手动应用路径重写，避免二次匹配代理规则
          const rewriteRule = Object.keys(proxyOptions.pathRewrite)[0];
          req.url = proxyOptions.pathRewrite[rewriteRule](req.url);
          return false;
        }
      },
      '^/api': {
        target: 'https://address2',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/api': '/api' },
        logLevel: 'debug',
      },
    },
  },
})

方法2：调整代理规则顺序

将^/backend的代理规则放在^/api之后，确保/api开头的请求优先匹配第二个规则，而/backend开头的请求先匹配第一个规则（需结合实际测试验证生效情况）：

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '^/api': {
        target: 'https://address2',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/api': '/api' },
        logLevel: 'debug',
      },
      '^/backend': {
        target: 'https://address1',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/backend': '/api' },
        logLevel: 'debug',
      },
    },
  },
})

方法3：检查目标地址接口有效性

如果确认请求确实应该转发到https://address1，需要验证address1上是否存在/api开头的对应接口，若不存在，需调整pathRewrite规则为目标地址实际存在的路径。

排查辅助 #

查看devServer的debug日志，日志会显示请求最终被转发到的目标地址，可快速确认是地址错误还是接口不存在导致的404。

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