跨域请求携带cookie
·
ajax请求一般分为以下几种实现方式:
- 原生创建 var xhr = new XMLHttpRequest();
- jquery
- fetch
- axios
如果是前后端不分离的项目,在发起ajax请求时候,会自动携带cookie信息;
如果是前后端分离项目(当今开发的主流),则基本都是前端跨域请求后端接口,则不会自动携带cookie信息,但是也可以做到携带cookie信息,需要额外配置,具体如下:
一、原生Ajax请求(添加xhr.withCredentials = true;)
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.withCredentials = true;
xhr.send();
二、jQuery
$.ajax({
url: 'http://example.com',
xhrFields: {
withCredentials: true
}
})
三、fetch
fetch('http://example.com', {
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
四、axios
axios.get('http://example.com', {
withCredentials: true
})
注:(1)withCredentials: true(针对于axios ,其他三种情况同样)并不等同于在请求头中添加任何特定的信息,而是影响浏览器行为,让浏览器知道这个请求需要带上cookie。这就是为什么你在请求头中并不会看到对应的字段。
(2)需要确保服务器端允许携带凭证的跨域请求,这可以通过在服务器响应头中设置 Access-Control-Allow-Credentials 为 true。同时,Access-Control-Allow-Origin 不能为 *,必须指定具体的值。
更多推荐



所有评论(0)