XMLHttpRequest与jQuery AJAX的响应头差异及跨域请求咨询

嘿，我来帮你捋清楚这两者在响应头上的差异~ 其实jQuery AJAX本质是对原生XMLHttpRequest的封装，大部分场景下响应头的逻辑是一致的，但细节上确实有几个值得注意的点：

1. 触发响应头差异的核心根源：请求头默认配置不同 #

服务器返回的响应头很多时候是根据请求头来动态调整的，而jQuery和原生XHR的默认请求头设置有区别：

• jQuery的$.post默认行为：它会自动把你传入的对象格式的data转成application/x-www-form-urlencoded格式的字符串，同时默认设置请求头Content-Type: application/x-www-form-urlencoded; charset=UTF-8。
• 原生XMLHttpRequest默认行为：如果不手动设置，发送普通对象数据时不会自动编码，也不会默认添加上述Content-Type头；如果要发送urlencoded格式的数据，需要自己用URLSearchParams处理并手动设置请求头。

如果服务器对不同Content-Type的请求返回不同的CORS响应头（比如针对json格式请求返回额外的允许头），这时候两者拿到的响应头就会不一样。

2. CORS凭证相关的响应头差异 #

看你提供的响应头里有Access-Control-Allow-Credentials:true，说明你的请求是带凭证（Cookie）的：

• jQuery AJAX：默认是不携带凭证的，如果你能拿到这个响应头，要么是服务器默认允许，要么是你全局配置了$.ajaxSetup({xhrFields:{withCredentials:true}})。
• 原生XMLHttpRequest：必须手动设置xhr.withCredentials = true才会携带凭证，否则即使服务器允许，也不会发送Cookie，服务器可能就不会返回Access-Control-Allow-Credentials这个响应头。

3. 响应头的获取方式差异 #

虽然最终能拿到的响应头内容受浏览器同源策略限制，但获取方式有小区别：

• jQuery AJAX：在success回调里，你可以通过this.getAllResponseHeaders()（这里的this是封装后的jqXHR对象）获取所有允许访问的响应头。
• 原生XMLHttpRequest：直接通过xhr.getAllResponseHeaders()获取，逻辑和jqXHR一致，但没有封装层。

结合你的代码对比 #

你的jQuery代码：

var data = {'userId': window.cookie.get('userId'), 'sessionId': window.cookie.get('sessionId')} 
$.post(window.DbUrl + '/test', data, function (e) { 
    console.log(e); 
});

对应的原生XHR等效代码大概是这样：

var xhr = new XMLHttpRequest();
xhr.open('POST', window.DbUrl + '/test', true);
// 手动设置jQuery默认的Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 如果需要带凭证，手动开启
xhr.withCredentials = true;
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
        // 获取响应头
        console.log(xhr.getAllResponseHeaders());
    }
};
// 手动转成urlencoded格式
var formData = new URLSearchParams();
formData.append('userId', window.cookie.get('userId'));
formData.append('sessionId', window.cookie.get('sessionId'));
xhr.send(formData);

在这个等效场景下，两者拿到的响应头应该完全一致；如果出现差异，大概率是请求头的配置不一样（比如你给jQuery加了额外的全局请求头）。

内容的提问来源于stack exchange，提问作者A1Gard