vue脚手架配置代理请求

在 Vue 脚手架中，可以通过配置vue.config.js文件来设置代理请求，以解决跨域问题或实现其他代理需求。以下是两种常见的配置方式：

方法一：

在vue.config.js中添加如下配置：

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000' // 这里填写后端服务器的地址和端口
  }
};

说明：

优点是配置简单，请求资源时直接发送到前端的 8080 端口即可。

缺点是不能配置多个代理，且不能灵活地控制请求是否走代理。其工作方式是优先匹配前端资源，如果请求了前端不存在的资源，那么该请求会转发给服务器。

方法二：

编写vue.config.js配置具体代理规则：

module.exports = {
  devServer: {
    proxy: {
      '/api1': { // 匹配所有以'/api1'开头的请求路径
        target: 'http://localhost:5000', // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''} 
      },
      '/api2': { // 匹配多个代理，可添加更多
        target: 'http://localhost:5001', 
        changeOrigin: true,
        pathRewrite: {'^/api2': ''} 
      }
    }
  }
};

上述配置中，/api1和/api2是请求前缀，可以根据实际需求进行修改。target是代理目标的基础路径，即后端服务器的地址。changeOrigin用于控制请求头中的 host 值，一般设置为true，表示代理服务器向服务器发送请求时会伪装 host 头。pathRewrite是一个对象，其中的键值对用于重写请求路径。例如，‘^/api1’: ''表示将前缀/api1替换为空字符串。

说明：

优点是可以配置多个代理，且可以灵活地控制请求是否走代理。

缺点是配置略微繁琐，请求资源时必须加上前缀。

配置完成后，重启 Vue 应用以使代理配置生效。在代码中发送请求时，需要使用配置的前缀加上具体的接口路径。例如，对于上述配置中的/api1前缀，请求接口/user/list时，实际发送的请求地址应为http://localhost:8080/api1/user/list。

请注意，这里的后端服务器地址和端口需要根据你的实际情况进行修改。如果你的后端服务器运行在不同的主机或端口上，将相应的值替换到配置中即可。此外，确保 Vue 脚手架已经正确安装并且项目能够正常运行。如果在配置过程中遇到问题，可以检查配置的准确性、服务器是否正常运行以及网络连接等方面。