vue 配置代理，简单解决跨域问题

开发环境下，借助vue cli简单解决跨域问题。

配置方式一：

在vue.config.js文件中添加以下代码：

devServer: {
    proxy: '被代理的基础路径'
}  

这种方式只能配置一个代理，并且不能控制什么时候走代理，如果在public文件夹中有同路径名字一样的文件，则不走代理。

配置方式二：

在vue.config.js文件中添加以下代码：

devServer: {
    proxy: {

        '路径前缀1': {
            target: '被代理的基础路径1',
            pathReview: { '^协议路径1': '' },
            ws: true,  // 用于支持websocket,
            changeOrigin: true, //代理服务器与被代理服务器通讯时会改变请求来源
        },

        '路径前缀2': {
            target: '被代理的基础路径2',
            pathReview: { '^协议路径2': '' },
            ws: true,  // 用于支持websocket, 默认值为true
            changeOrigin: true, // 用于控制请求头中的host值，默认值为true
        },
    }
}

 

该配置略繁琐，但是胜在灵活，可以配置多个代理目标，注意请求资源时必须加路径前缀。

该方法借助vue-cli实现，仅用于 开发环境，生产环境还需要后端人员做跨域处理。