之前的跨域都是后台来解决,因为前端方便的解决方式只有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里面了,这样后台就可以拿到了,最后也算是差不多解决了
不知道方式对不对,但好在最后可以正常使用了