原生XMLHttpRequest跨域请求无法发送X-Requested-With Header问题咨询

首先明确结论：仅在目标服务器的CORS配置允许该头的前提下，原生XMLHttpRequest才能成功发送X-Requested-With头，否则无法绕过浏览器的同源策略限制。

核心原因解析 #

跨域请求中，X-Requested-With不属于浏览器定义的「简单请求头」（简单请求头仅包含Accept、Accept-Language、Content-Language、Content-Type的特定合法值），因此添加该头会触发浏览器的OPTIONS预检请求。只有当服务器在预检响应中同时满足以下条件：

• Access-Control-Allow-Origin包含当前请求的域名
• Access-Control-Allow-Headers明确列出X-Requested-With
• 若请求开启withCredentials: true，还需返回Access-Control-Allow-Credentials: true

浏览器才会继续发送后续的POST请求，否则会直接拦截请求，导致该头无法生效。

关于jQuery crossDomain:false的作用 #

jQuery中设置crossDomain: false时，会自动为XHR请求添加X-Requested-With: XMLHttpRequest头，但这并没有绕过同源策略——本质是jQuery帮你自动调用了setRequestHeader方法，能成功的前提依然是服务器支持该头的预检响应。如果服务器不支持，jQuery的请求同样会失败。

原生XHR的正确实现方式 #

如果服务器已配置好对应CORS规则，原生XHR只需直接添加头即可，示例修改如下：

function submitRequest()
{
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/navidad/xxxxx/data/actualizar", true);
  // 添加X-Requested-With头
  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  xhr.setRequestHeader("accept", "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8");
  xhr.setRequestHeader("accept-language", "en-US,en;q=0.5");
  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  xhr.withCredentials = true;
  var body = "contrasenia=hacked12345&email=williamdafoe@nano.com";
  xhr.send(body); // 直接发送字符串即可，无需转Blob简化代码
}

若服务器不支持预检的解决方案 #

如果服务器无法修改CORS配置来允许X-Requested-With头，那么任何前端方式（包括原生XHR和jQuery）都无法跨域发送该头，因为浏览器的同源策略会强制拦截这类未通过预检的请求。

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