Vue前端处理跨域

2018-08-15  本文已影响0人  平淡_115d

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

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

上一篇 下一篇

猜你喜欢

热点阅读