AJAX请求如何精确设置自定义Header？ajax请求发送自定义header

在前后端分离的架构体系中，AJAX 作为异步通信的核心技术，其灵活性不仅体现在数据格式的多样化，更体现在请求头（Header）的自定义能力上，直接修改或添加 HTTP 请求头，是解决跨域资源共享（CORS）认证、传递自定义鉴权令牌以及优化缓存策略的关键手段，对于开发者而言，掌握在 AJAX 请求中精准注入 Header 信息，不仅是基础技能，更是构建高安全性、高兼容性 Web 应用的核心能力。

原生 XMLHttpRequest 的 Header 配置

在传统的 AJAX 实现中，XMLHttpRequest 对象提供了最底层的控制权限，要发送自定义 Header，必须在调用 open 方法之后、send 方法之前执行 setRequestHeader 方法，这一顺序至关重要，因为一旦请求开始发送，浏览器将锁定请求头,任何后续的修改尝试都会导致静默失败或抛出异常。

具体实现时，开发者通常需要在 onreadystatechange 事件触发且 readyState 为 2（已调用 open）时进行设置，在传递 JSON 数据时，必须显式设置 Content-Type 为 application/json，否则后端可能无法正确解析请求体，对于需要携带 Cookie 或自定义 Token 的场景，可以通过 setRequestHeader('Authorization', 'Bearer ' + token) 来实现身份验证，需要注意的是，部分 Header（如 Content-Length、Host 等由浏览器自动管理的 Header）是禁止通过此方法手动设置的,强行设置会被浏览器忽略。

Fetch API 的现代实践

随着 ES6 的普及，Fetch API 已成为替代 XMLHttpRequest 的主流方案，其优势在于基于 Promise 的语法结构，使得异步代码更加清晰易读，在 Fetch 中，Header 的配置通过 headers 选项对象完成，该对象可以是普通对象，也可以是 Headers 实例。

使用普通对象时，键值对直接映射为 HTTP 头字段。

fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Custom-Header': 'custom-value'
    },
    body: JSON.stringify({ key: 'value' })
})

这种方式的直观性极大地提升了开发效率，Fetch 在处理某些复杂场景时存在局限性，例如它默认不会发送 Cookie，除非在 credentials 选项中设置为 include，Fetch 对部分安全相关的 Header 同样有保护机制,开发者需注意浏览器安全策略的限制。

Axios 的封装与拦截器优势

在实际企业级项目中，Axios 因其强大的拦截器功能而备受青睐，Axios 允许开发者在请求发送前和响应接收后统一处理 Header 信息，这为全局鉴权、日志记录和错误处理提供了极大的便利，通过配置 axios.defaults.headers.common 或 axios.defaults.headers.post，可以实现所有请求自动携带特定的 Header，如统一的 Content-Type 或全局的 Authorization 令牌。

更重要的是，Axios 的拦截器机制允许动态修改 Header，在请求拦截器中，可以检查本地存储中的 Token 是否过期，若未过期则自动更新 Header 中的认证信息；若已过期，则重定向至登录页面，这种集中式的 Header 管理策略，不仅减少了代码冗余,还显著提升了系统的可维护性和安全性。

跨域与安全性考量

在发送自定义 Header 时，跨域问题是不容忽视的挑战，当 AJAX 请求包含非简单请求（如自定义 Header、非标准 Content-Type 等）时，浏览器会先发送一个 OPTIONS 预检请求，后端服务器必须正确配置 CORS 响应头，特别是 Access-Control-Allow-Headers，以明确允许客户端发送哪些自定义 Header，若后端未正确配置，预检请求将失败,导致实际请求被浏览器拦截。

安全性方面，应避免在 Header 中传递敏感信息，如密码或完整的用户隐私数据，对于身份验证，推荐使用标准的 Authorization Header 配合 JWT 或 OAuth 2.0 协议，并确保通过 HTTPS 传输，以防止中间人攻击窃取 Header 中的敏感信息。

相关问答

Q1: 为什么在 Fetch 中设置自定义 Header 后，浏览器仍然报错提示 CORS 错误？ A: 这通常是因为自定义 Header 触发了浏览器的预检请求（Preflight Request），浏览器会先发送一个 OPTIONS 请求询问服务器是否允许该自定义 Header，如果后端服务器没有在响应中设置 Access-Control-Allow-Headers 来明确允许你发送的自定义 Header，或者没有正确响应 OPTIONS 请求，浏览器就会阻止实际请求的发送，解决此问题的关键在于确保后端服务器正确配置 CORS 策略，允许特定的 Header 和方法。

Q2: Axios 拦截器中修改 Header 会影响全局所有请求吗？ A: 是的，Axios 的拦截器（Interceptors）是全局生效的，在 axios.interceptors.request.use 中修改 Header，会影响通过该 Axios 实例发出的所有请求，这对于统一添加鉴权 Token、设置全局超时时间或添加请求追踪 ID 非常有用，但需要注意的是，如果创建了多个 Axios 实例，每个实例拥有独立的拦截器链,修改其中一个实例的拦截器不会影响其他实例。