JavaScript Ajax 设置与获取自定义 Header 完整指南

作者:纸飞机时间:2026-10-23 16:31:08浏览:435

本文详解如何在 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 编程工作提供实际帮助。

作者最新文章