vue.config.js中的proxy结合nginx进行请求转发

在 vue.config.js 中使用 proxy 配置可以实现前端请求数据时通过代理服务器转发请求，结合 nginx 服务器可以实现更为灵活的请求转发。

首先，在 vue.config.js 文件中添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 转发的目标地址
        pathRewrite: {
          '^/api': '' // 路径重写，去掉请求路径中的'/api'部分
        }
      }
    }
  }
}

在上述配置中，/api 是前端请求的 API 接口地址开头，http://localhost:8080 是 nginx 提供的后端服务器地址。通过 pathRewrite 可以实现请求路径重写，将请求转发给正确的后端服务器。

在 nginx 配置文件中添加如下内容：

location /api {
    proxy_pass http://localhost:3000;  # 转发的地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

在上述配置中，/api 是前端请求的 API 接口地址开头，http://localhost:3000 是后端服务器地址。通过这样配置，前端请求经过 nginx 代理服务器代理后，将请求转发给正确的后端服务器，实现了更为灵活的请求转发。

需要注意的是，在使用代理服务器时，请确保目标地址和端口号正确，并确保代理服务器和后端服务器之间的通信正常。