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里面了,这样后台就可以拿到了,最后也算是差不多解决了

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,027评论 19 139
  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,394评论 0 5
  • 原文地址:原文地址 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义...
    C_Y大渔阅读 1,267评论 1 13
  • 玄云压城惊雷低,飞蓬远郭疏影长。 湖光山色两不分,轻舟一竿采莲香。 书言浮生千点泪,可笑沧天万般雨。 风侵芭蕉瘦青...
    落梅君阅读 350评论 0 1
  • 文:耳双生 听完芳姐的这段很有电影画面感的故事,小其若有所思,低着头陷入沉默中。 突然,坐在对面的拉拉冷不丁的一拍...
    耳双生阅读 332评论 10 1