vue2 配置多个后端 跨越配置

在 Vue 2 项目中，配置多个后端跨域（CORS）代理时，通常是通过 Vue CLI 的 vue.config.js 文件进行配置。以下是如何配置多个后端 API 的跨域代理：

1. 在 vue.config.js 中配置代理

在 vue.config.js 文件中，使用 devServer.proxy 来配置代理规则。你可以为不同的后端 API 配置不同的代理规则，来解决跨域问题。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      // 后端1的API代理
      '/api1': {
        target: 'http://backend1.com', // 后端1的地址
        changeOrigin: true, // 是否改变请求头中的Origin
        pathRewrite: {
          '^/api1': '' // 把/api1替换为空，即请求中去掉/api1
        }
      },
      // 后端2的API代理
      '/api2': {
        target: 'http://backend2.com', // 后端2的地址
        changeOrigin: true, // 是否改变请求头中的Origin
        pathRewrite: {
          '^/api2': '' // 把/api2替换为空，即请求中去掉/api2
        }
      },
      // 其他API代理...
    }
  }
}

2. 访问方式

在你的 Vue 组件中，访问 API 时需要根据配置的代理路径来访问：

• 访问第一个后端 API（假设 /api1/xxx ）：

  axios.get('/api1/endpoint')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });

• 访问第二个后端 API（假设 /api2/xxx ）：

  axios.get('/api2/endpoint')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });

3. pathRewrite 解释

• pathRewrite 用来重写路径，它会根据规则将请求路径的某部分去掉或替换。在上面的配置中， /api1 会被去掉，最终请求会发到 http://backend1.com/endpoint 。
• 如果不需要去掉 /api1 ，你可以省略 pathRewrite 配置。

4. changeOrigin 解释

• changeOrigin 的作用是改变请求头中的 Origin 字段，确保目标后端服务器接收到正确的来源头。在跨域请求时，通常需要将其设置为 true 。

5. 多个后端的跨域配置

你可以为不同的后端配置不同的 API 路径和目标服务器，从而在开发环境中支持多个后端的跨域请求。

这样就可以方便地在 Vue 2 项目中配置多个后端 API 的跨域代理了。如果后端服务器还需要其他特殊的配置（比如修改请求头、身份验证等），也可以在 proxy 中配置更多的选项。