vue代理服务器跨域

### Vue项目中配置代理服务器以解决跨域问题

在Vue项目中，可以通过配置`vue.config.js`文件中的`devServer.proxy`属性来设置代理服务器，从而有效解决开发环境下的跨域问题[^1]。

#### 配置示例

创建或编辑项目的根目录下名为`vue.config.js`的文件，在其中添加如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 替换为目标服务的实际地址
        pathRewrite: {'^/api': ''},   // 移除请求路径中的/api前缀
        ws: true,                     // 支持WebSocket连接
        changeOrigin: true            // 修改请求头部信息中的host字段为target的内容
      }
    }
  }
};

上述配置表示所有以`/api`开头的请求都将被转发至`http://example.com`，并且会移除原始URL中的`/api`部分。这使得前端可以直接使用相对路径发送请求而不必关心具体的域名和端口号[^3]。

对于需要处理多个不同接口的情况，可以在同一个proxy对象内定义多条规则，每一条对应不同的API前缀及其对应的后台服务地址[^5]。

例如增加两个分别指向不同后端的服务映射：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://service1.example.com',
        pathRewrite: {'^/api1': ''},
        changeOrigin: true,
      },
      '/api2': {
        target: 'http://service2.example.com',
        pathRewrite: {'^/api2': ''},
        changeOrigin: true,
      }
    }
  }
};

当设置了`changeOrigin=true`时，浏览器发出的HTTP请求到达目标服务器时会被修改成该服务器自己的主机名；如果设为`false`，则保持原样不变。