VueCLI 脚手架配置代理服务器解决跨域

配置代理

配置代理的目的是为了解决开发中的跨域问题。跨域指的是在网络请求中，协议、IP/域名、端口有任何不同，都被视作跨域。浏览器会主动检测是否跨域，当跨域发生时，浏览器会拦截由服务端响应的数据，抛出异常。

为了解决跨域问题，Vue CLI 提供了几种配置代理的方式：

方法一：通过 vue.config.js 文件配置

在项目根目录下创建一个 vue.config.js 文件，并添加以下配置：

module.exports = {
  devServer: {
    proxy: "http://localhost:8080",
  },
};

这个配置将把所有以 /api 开头的请求代理到 http://localhost:8080。

方法二：通过多个代理配置

如果需要配置多个代理，可以使用对象的形式进行配置：

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
      "/api2": {
        target: "http://localhost:8082",
        changeOrigin: true,
      },
    },
  },
};

在上面的配置中，以 /api 开头的请求将被代理到 http://localhost:8080，以 /api2 开头的请求将被代理到 http://localhost:8082。

另外，你还可以通过 changeOrigin 参数来控制是否改变请求头中的 host 字段。

更多配置参考

查阅官方文档了解更多关于 Vue CLI 配置的详细信息和选项：Vue CLI 配置参考