本文详解如何在 JavaScript 的 Ajax 请求中设置和获取自定义 HTTP Header。介绍两种设置方法：通过 beforeSend 修改请求头或使用 headers 配置对象。同时说明如何从 XMLHttpRequest 对象中读取响应头，重点解析跨域场景下 Access-Control-Expose-Headers 的作用及服务端配置示例。
本文详细解析在 JavaScript 中通过 Ajax 技术设置和读取自定义 HTTP 头信息的具体实现方式，供开发者参考。
1、在 JavaScript Ajax 中配置自定义 Header
1.1 第一种实现方式：
$.ajax({
type: "POST",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded",
beforeSend: function (request) {
request.setRequestHeader("token1", "Chenxizhang");
},
success: function (data) {
//your code
}
});1.2 第二种实现方式：
$.ajax({
headers: {
"testheader": "test"
},
type: "POST",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded",
success: function (data) {
//your code
}
});
2、从 Ajax 响应中读取 Header 信息
当 Ajax 请求执行完毕后，会返回一个 XMLHttpRequest（xhr）对象，该对象包含了服务器返回的头信息。开发者可以使用 getResponseHeader(key) 方法获取指定的头字段，或使用 getAllResponseHeaders() 方法获取所有默认可访问的头信息。
$.ajax({
type: "POST",
url: "Handler1.ashx",
contentType: "application/x-www-form-urlencoded",
success: function (data) {
//your code
},
complete: function (xhr, data) {
/*
获取相关Http Response header
getResponseHeader(key)：获取指定头信息
getAllResponseHeaders()：获取全部可默认可获取的头信息
*/
var date=xhr.getResponseHeader('Date');// 服务器端时间
//获取服务端自定义的header信息
var stoken = xhr.getResponseHeader('servertoken');
var list = xhr.getAllResponseHeaders();
console.log(list);
/*
date: Fri, 12 Jul 2019 12:41:00 GMT
content-encoding: gzip
server: Microsoft-IIS/10.0
x-aspnet-version: 4.0.30319
x-powered-by: ASP.NET
vary: Accept-Encoding
content-type: text/plain; charset=utf-8
servertoken: test1
cache-control: private
content-length: 129
*/
}
});
3、跨域请求场景下获取自定义 Header 的处理
在使用 JS Ajax 进行跨域请求时，浏览器通常禁止客户端直接设置自定义 Header。然而，如果服务端在响应中配置了 Access-Control-Expose-Headers 字段，客户端便可以在响应中读取到服务端设置的自定义 Header 信息。
以下提供 ASP.NET 服务端的配置示例：
public void ProcessRequest(HttpContext context)
{
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.AddHeader("Access-Control-Allow-Headers", "*");
context.Response.AddHeader("Access-Control-Allow-Methods", "*");
//自定义header信息
context.Response.AddHeader("servertoken", "test");
context.Response.AddHeader("Access-Control-Expose-Headers", "servertoken");
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
如需了解更多 JavaScript 相关知识，建议查阅本站《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》等专题文章。
希望上述内容能对各位的 JavaScript 编程工作提供实际帮助。