IE 11中GET XHR请求无请求头问题及发送请求头方法咨询

嘿，我之前踩过IE11这个XHR的坑，来给你详细说说怎么解决～

IE11对GET类型的XMLHttpRequest请求有两个特殊点：

• 一是它的Network控制台本身有展示bug，对于自定义请求头，有时不会在GET请求的详情里显示，哪怕请求已经成功发送；
• 二是如果你的GET请求带了非标准的自定义头（比如X-User-Token这类），IE11会自动触发OPTIONS预检请求，如果服务器没正确处理预检，请求会直接被中止，自然也看不到请求头。

亲测有效的方法，按这个来：

1. 用原生XMLHttpRequest对象（IE11不支持Fetch API，别用这个）
2. 调用open()之后，必须先设置请求头，再调用send()，顺序不能乱
3. 跨域场景下，服务器必须支持OPTIONS预检，返回Access-Control-Allow-Headers响应头，包含你要发送的自定义头名称

给你一个完整的代码示例：

// 创建XHR对象
const xhr = new XMLHttpRequest();
// 初始化GET请求，第三个参数true表示异步
xhr.open('GET', '/your-api-path', true);

// 设置请求头——这里可以是标准头或自定义头
xhr.setRequestHeader('X-Custom-Header', 'my-test-value');
xhr.setRequestHeader('Accept', 'application/json');

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('请求成功:', xhr.responseText);
  }
};

// 发送请求
xhr.send();

因为IE11控制台不靠谱，你可以用两种方式验证：

• 在代码里手动打印已设置的请求头：console.log('已设置的请求头:', xhr.getRequestHeader('X-Custom-Header'));
• 在服务器端打印接收到的请求头，看是否包含你设置的字段（这是最准确的方式）

• 不要给GET请求设置Content-Type头，IE11会直接忽略它（毕竟GET请求没有请求体）；
• 同域请求不会触发预检，所以同域场景下设置请求头会更顺利，控制台也大概率能正常显示；
• 如果控制台还是看不到，可以尝试切换到请求详情的「原始请求」视图，有时候IE11会在这里展示完整的请求头。

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