ajax请求一般分为以下几种实现方式:

  1.  原生创建     var xhr = new XMLHttpRequest();
  2. jquery 
  3. fetch
  4. 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 不能为 *,必须指定具体的值。

更多推荐