使用XMLHttpRequest发送请求无法携带Cookie

最新推荐文章于 2025-02-25 00:17:47 发布

置顶芙罗拉之风

最新推荐文章于 2025-02-25 00:17:47 发布

阅读量1.5w

点赞数

本文链接：https://blog.csdn.net/u011674895/article/details/83932461

版权

本文探讨了使用XMLHttpRequest发送请求时无法携带Cookie的问题,并提供了解决方案,包括使用img标签和设置withCredentials参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用XMLHttpRequest发送请求无法携带Cookie

最近在项目里设计了一段JS，需要客户网站嵌入这段JS，然后使用XMLHTTPRequest发送请求，但是发现请求中无法携带Cookie。

经过研究发现XMLHTTPRequest发送请求是无法携带Cookie的，即使使用了setRequestHeader方法是设置请求头里的cookie，也无法携带cookie。

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Cookie', 'mycookie=cookie');

原因如下：https://stackoverflow.com/questions/15198231/why-cookies-and-set-cookie-headers-cant-be-set-while-making-xmlhttprequest-usin

所以就想到可以在JS里面动态插入一个Pixel（一个长宽为1的img标签，src属性为请求的URL）来发送请求，能成功携带cookie，示例代码如下：

var imgTag = document.createElement('img');
var bodyTag = document.getElementsByTagName('body')[0];
imgTag.height = 1;
imgTag.width = 1;
imgTag.style = 'border-style: none; display: none';
imgTag.alt = '';
imgTag.src = tbUrl;    //你要发请求的url

bodyTag.insertBefore(imgTag, bodyTag.childNodes[0]);

另外还可以在请求头里面加入withCredentials: true来实现：

function postJson(url, data, isWithCredentials) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
            console.log(xmlHttp.responseText);
    };
    xmlHttp.open("POST", url, true); // true for asynchronous
    if (isWithCredentials === true) {
        xmlHttp.withCredentials = true;
    }
    xmlHttp.send(JSON.stringify(data));
}