Vue.js代理设置解决跨域问题

当我们在使用vue.js进行项目开发时，因为我们可以本地以localhost:port（端口号）这样形式启动项目进行本地调试，这个时候我们需要使用后端接口就会出现跨域问题，这是因为localhost和访问域名不一致造成，在vue-cli使用的模板插件中，就有解决这个问题的方法，它是通过使用node代理来将localhost映射成访问的域名。

我们是在config下的index.js文件中进行设置，一般我们使用vue-cli搭建好项目需要跨域只需要修改下面部分：

dev: {
    env: require('./dev.env'),
    port: 8686,   //这里的端口号每个项目对应一个，就可以直接访问localhost:8686
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api':{     //这里是公共部分，在调用接口时后面接不相同的部分，/api就相当于http://192.168.0.199:8926/api这一段
            target:'http://192.168.0.199:8926',   //这里写的是访问接口的域名和端口号
            changeOrigin: true, // 必须加上这个才能跨域请求
            // pathRewrite: {  // 重命名
            //   '^/api': ''
            // }
        }
    },

---

我们可以同时代理多个地址，此时我们已经完全解决了跨域问题，以及本地测试后台无法向我们本地环境设置cookie的情况了。