vue.config.js配置多个proxy 举例实现

可以在 vue.config.js 文件中使用以下代码配置多个 proxy：

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

在上述代码中，配置了两个代理请求，一个是以 /api1 起始的请求会被代理到本地的 3000 端口上，另一个是以 /api2 起始的请求会被代理到本地的 4000 端口上。同时，changeOrigin 参数设置为 true 表示开启跨域请求，pathRewrite 参数用于转义请求路径中的部分内容。

相关问题

vue.config.js配置devServer.proxy

在 vue.config.js 中，你可以使用 devServer.proxy 来配置代理。这个选项可以帮助你将 API 请求代理到其他的后端服务。

下面是一个示例配置的代码段：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 将请求代理到这个目标地址
        changeOrigin: true, // 设置为true，以便更改请求头中的Host字段为目标URL
        pathRewrite: {
          '^/api': '', // 将/api路径重写为空字符串
        },
      },
    },
  },
};

这个配置会将以 `/api` 开头的请求代理到 `http://example.com`。

例如，当你发送一个请求到 `/api/users` 时，它会被代理到 `http://example.com/users`。

你可以根据自己的需要进行配置，更多关于 devServer.proxy 的详细信息可以参考 Vue CLI 的官方文档。

vue.config.js配置proxy无效

根据提供的引用[1]，vue.config.js配置proxy无效的原因可能是因为proxy的值应该是一个对象，而不是一个字符串。正确的配置应该是这样的：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    port: 8085
  }
}

其中，`/api`是需要代理的路径，`target`是代理的目标地址，`changeOrigin`表示是否改变请求头中的Origin字段，`pathRewrite`表示路径重写规则。

如果以上配置仍然无效，可以尝试在引用[2]提到的main.js文件中设置axios的baseURL为代理的地址：

import axios from 'axios'

axios.defaults.baseURL = '/api'

这样，axios发送的请求会自动添加上`/api`前缀，从而触发代理。

--相关问题--:
1. 什么是跨域请求？
2. 如何在Vue中使用axios发送POST请求？
3. Vue中如何使用代理