vue 前端设置允许跨域_Vue前端处理跨域

之前的跨域都是后台来解决，因为前端方便的解决方式只有jsonp，但是jsonp只能用于get请求，所以最好的方式只能是后台了；

但现在不行了，后台让前端解决，原因是后期代码部署后就不会存在跨域问题了，后台不解决；那就前端呗。

目前开发的是Vue项目，所以就百度查到了proxy代理，网上有很多，但为了方便自己，以防后期忘记，所以还是自己写下来吧；

1、在config/index.js文件下，由于只有开发环境才会遇到跨域问题，所以只需要在dev中添加proxyTable相关设置，

proxyTable: {

'/dailiming': { //定义的代理名

target: 'http://192.168.137.183:8080/demo', //接口地址

changeOrigin: true,

pathRewrite: {

'^/dailiming': '/'

}

}

},

2、同时在config/dev.env.js文件下，将API_HOST的值改为proxyTable里定义的代理名，注意符号

API_HOST:'"/dailiming/"'

3、正常情况下这种即可正常使用了。

但是我们遇到了另一个问题，就是跨域的时候，后台通过接口response存入cookie的值，前端取不到啊，也无法放到request里面，怎么办，各种百度，最后发现后台response的值后面加了个httpOnly。赶快跟后台说，让他把httpOnly去掉，但是还是不行，还是各种百度，发现需要把前端刚才定义的代码名改成和后台定义的接口一直才行，如果后台定义的是demo，我们定义的代码也需要叫demo，如下是对1和2代码的修改，代理名改为demo

proxyTable: {

'/demo': { //定义的代理名

target: 'http://192.168.137.183:8080/demo', //接口地址

changeOrigin: true,

pathRewrite: {

'^/demo': '/'

}

}

},

API_HOST:'"/demo/"'

改完以后，发现后台response  set-cookie的值可以放到前端的request里面了，这样后台就可以拿到了，最后也算是差不多解决了

不知道方式对不对，但好在最后可以正常使用了