Vue 开发服务器代理不起作用

在 Vue 开发中，我们可能需要使用代理来解决跨域访问的问题。通常情况下，配置代理并不难，只需要在 vue.config.js 文件中添加如下配置即可：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

然而，有时候我们可能会遇到代理不起作用的问题，即使配置了上面的代码。那么，我们该如何解决这个问题呢？

原因分析

首先，我们需要确定代理不起作用的原因，通常有以下几点：

1. 没有重启服务器：在更改 vue.config.js 文件后，一定要重新启动开发服务器，否则更改将不会生效。

2. 端口问题：如果你的后端服务运行在不同的端口上，那么你需要将目标端口指定到代理的配置中。

3. 没有设置跨域相关的头信息：在请求被代理前，设置头信息是很重要的。通常情况下，我们需要设置 Access-Control-Allow-Origin 头信息来允许跨域资源访问。

4. 没有设置路径重写规则：如果你的后端服务实现了不同的 URL 规则，那么你需要在 pathRewrite 中指定重写规则。

解决方案

针对以上问题，我们可以逐个解决。首先，我们需要确保已经重启了开发服务器。

接下来，我们需要设置代理的目标端口。比如，如果你的后端服务运行在 http://localhost:8000 上，那么你需要将 target 设置为该地址即可。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

如果你还遇到跨域问题，那么你需要在后端服务中添加 Access-Control-Allow-Origin 头信息。比如，在 Express 中，你可以使用以下代码添加头信息：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

最后，如果你需要设置路径重写规则，那么你需要在 pathRewrite 中指定重写规则。比如，如果你的后端服务将 /api/v1 转换为 /v1，那么你可以如下设置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api/v1': '/v1'
        }
      }
    }
  }
}

总结

如果你遇到 Vue 开发服务器代理不起作用的问题，那么你需要仔细排查问题，确定代理不起作用的原因，然后针对性地解决问题。通常情况下，配置代理并不难，只需要注意以上几点即可。