美文网首页
Vue前端处理跨域

Vue前端处理跨域

作者: 平淡_115d | 来源:发表于2018-08-15 09:22 被阅读0次

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

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

相关文章

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • Vue前端处理跨域

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

  • 前端踩过的坑

    关于前端 跨域问题 大概问题 1,前端无须处理,需要在后台配置 niginx的配置 处理跨域的域名 关于布局上 ...

  • axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求。 关于跨域 跨域的概念这些就不说...

  • SpringBoot+Vue数据交互

    后端框架Spring Boot,前端框架vue 1. 跨域+携带cookie 跨域-携带cookie 2. 拦截器...

  • Vue学习笔记(一)

    跨域问题 vue前端跨域问题 1. 利用vue-cli框架与axios结合,访问服务器后端接口,axios不需要太...

  • vue跨域问题

    vue前端网页遇到跨域问题,我们需要在vue.config.js中配置devServer:{}内容

  • vue项目中跨域设置实践(主要是踩过的坑)

    之前的文章vue项目的跨域设置,中提到了vue的跨域设置: 从前端向后台请求“/list”这个地址的时候,在浏览器...

  • 跨域问题

    VUE脚手架项目跨域进行反向代理解决跨域问题 还有一种解决办法就是:服务器允许任何人访问,前端不需要做任何处理,请...

  • Vue面试归纳

    1. Vue项目axios跨域 跨域问题出现,使用webpack-dev-server的proxy功能处理 1...

网友评论

      本文标题:Vue前端处理跨域

      本文链接:https://www.haomeiwen.com/subject/yuribftx.html