前端跨域传递Cookie设置

因为最近在使用Vue和SpringBoot结合开发,异步请求使用axios这个插件,本身在后端已经配置了跨域,前端指定了axios.defaults.baseURL,对于get请求是没有问题的,本来以为可以安心写页面了,结果发现对于后端配置的需要验证authc才能访问的post页面完全不能访问。查询资料才知道,因为前端访问时候没有把cookie放到请求头里面,查阅了一下资料,这里记录下。axios我的配置是这样的:

var axios = require(‘axios’)
axios.defaults.baseURL = ‘http://localhost’
axios.defaults.withCredentials = true

JavaScript

登录之后的请求会带登录用户信息,需要把登录时的cookie设置到之后的请求头里面。而跨域请求要想带上cookie,必须要请求属性withCredentials=true,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie。
withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization,headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。

  1. axios的Ajax请求

//vue的main.js
axios.defaults.withCredentials = true;//允许跨域携带cookie信息

JavaScript
2. JQuery的Ajax请求

$.ajax({
type: “GET”,
url: url,
xhrFields: {
withCredentials: true // 允许跨域携带cookie信息
},
processData: false,
success: function(data) {}
});

JavaScript
3. XMLHttpRequest的Ajax请求

更多请见:http://www.mark-to-win.com/tutorial/52305.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值