ajax请求携带自定义请求头header（跨域和同域）

在Ajax请求中携带自定义请求头（header）可以通过设置XMLHttpRequest对象的setRequestHeader方法来实现。以下是跨域和同域环境下发送带有自定义请求头的Ajax请求的示例代码：

跨域环境:

由于同源策略（Same-origin policy）的限制，跨域请求通常需要服务器支持CORS（Cross-Origin Resource Sharing）。服务器需要在响应头中包含Access-Control-Allow-Headers来指明允许的自定义头，以及Access-Control-Allow-Origin来指定允许的跨域来源。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
 
// 设置自定义请求头
xhr.setRequestHeader('Custom-Header', 'value');
 
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功
    console.log(xhr.responseText);
  } else {
    // 请求失败
    console.error('Request failed.  Returned status of ' + xhr.status);
  }
};
 
xhr.send();

同域环境:

同域请求不受同源策略限制，可以直接通过设置XMLHttpRequest对象的setRequestHeader方法来添加自定义请求头。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
 
// 设置自定义请求头
xhr.setRequestHeader('Custom-Header', 'value');
 
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功
    console.log(xhr.responseText);
  } else {
    // 请求失败
    console.error('Request failed.  Returned status of ' + xhr.status);
  }
};
 
xhr.send();

在这两个示例中，我们都使用了XMLHttpRequest对象的open方法来初始化请求，并设置了请求的类型和URL。然后使用setRequestHeader方法来添加自定义的请求头，最后监听onload事件以处理响应。