Ajax设置自定义请求头的两种方法

本文介绍了两种使用自定义请求头token的方法。方法一利用beforeSend设置请求头,方法二直接在headers中指定。这两种方式均适用于发送带有认证信息的HTTP请求。

用自定义请求头token为例

 

  • 方法一
     $.ajax({
                 type: "post",
                 url:"http://127.0.0.1:4564/bsky-app/template/testPost",
                 contentType: "application/json;charset=utf-8",//这个参数也是header参数
                 data :JSON.stringify({"bodyName":"sdfsdf","date":"2017-11-28 07:34:01","price": 10.5,"tbId": 1}),
                 dataType: "json",
                 //这里是重点
                 beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");
                 },
                 success: function (data) {
                     alert(data);
                 },error:function(error){
                     console.log(error);
                 }
             });

 

  • 方法二
    $.ajax({
             type: type,
             headers: {
                 'Access-Token':$.cookie('access_token')
             },
             url: url,
             data: data,
             success: function(data) {
             },
             error: function(err) {
             },
             complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数 
             }
    });
    

转载于:https://www.cnblogs.com/longbky/p/10622393.html

<think>好的,用户现在想知道如何设置AJAX请求头。首先,我需要回忆一下AJAX的相关知识,尤其是关于设置请求头方法AJAX通常使用XMLHttpRequest对象或者现代的Fetch API,可能用户指的是这两种方式中的一种或者两者都需要。 接下来,我需要考虑用户可能的背景。用户可能是一个前端开发者,可能在开发网页时需要和后端API交互,需要设置特定的请求头,比如Content-Type、Authorization等。也有可能用户遇到了跨域问题,需要设置CORS相关的头信息,但通常服务端需要设置这些,客户端设置可能有限制。 然后,我需要整理设置请求头的步骤。对于XMLHttpRequest,使用setRequestHeader方法;对于Fetch API,在init对象的headers属性中添加。另外,用户可能使用第三方库如jQuery的$.ajax,或者axios,这些库的配置方式有所不同,需要分别说明。 还要注意,有些请求头是受限制的,不能随意设置,比如User-Agent、Referer等,浏览器可能会阻止这些头的修改。同时,设置自定义头时,可能需要服务端配合,比如在CORS预检请求中允许这些头,否则请求会被拒绝。 可能用户的需求是设置常见的头,比如Content-Type为application/json,或者Authorization携带token。需要给出具体的例子,说明如何在不同方法中实现。此外,可能需要提醒用户关于安全性和最佳实践,比如不要在客户端存储敏感信息,使用HTTPS等。 最后,总结不同方法的优缺点,帮助用户根据具体情况选择合适的方式。比如,Fetch API更现代,支持Promise,而XMLHttpRequest兼容性更好,但更冗长。第三方库如axios提供了更简洁的API,适合复杂应用。</think>在 AJAX 请求设置请求头主要通过以下 3 种方式实现,具体使用场景及完整示例如下: --- ### **一、原生 XMLHttpRequest** ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data'); // 设置单个请求头 xhr.setRequestHeader('Content-Type', 'application/json'); // 设置多个请求头(需多次调用) xhr.setRequestHeader('Authorization', 'Bearer your_token'); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send(JSON.stringify({ key: 'value' })); ``` --- ### **二、Fetch API** ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', // 基础类型 'Authorization': 'Bearer your_token', 'X-Custom-Header': 'value', // 可添加自定义头部 }, body: JSON.stringify({ key: 'value' }) }); ``` --- ### **三、Axios 库(推荐方案)** ```javascript axios.post('https://api.example.com/data', { key: 'value' }, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, 'X-Requested-With': 'XMLHttpRequest' } } ); ``` --- ### **特殊场景配置技巧** #### 1. 全局默认头配置(Axios) ```javascript // 设置全局默认头 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ``` #### 2. 动态头部(JWT 场景) ```javascript axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${store.getters.token}`; return config; }); ``` #### 3. 文件上传头设置 ```javascript const formData = new FormData(); formData.append('file', file); axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' // 必须设置 } }); ``` --- ### **关键注意事项** 1. **CORS 限制** - 自定义头部需服务端设置 `Access-Control-Allow-Headers` - 预检请求 (OPTIONS) 必须通过验证 2. **浏览器安全限制** - 禁止设置以下敏感头: ``` Accept-Charset, Accept-Encoding, Connection, Content-Length Host, Referer, User-Agent, Via ``` 3. **Content-Type 优先级** | 设置方式 | 优先级 | |----------------------|--------| | `FormData` 自动生成 | 最高 | | 手动设置请求头 | 次高 | | 浏览器默认推断 | 最低 | --- ### **不同方法的兼容性对比** | 方法 | 支持度 | 特点 | |---------------------|------------------|------------------------------| | XMLHttpRequest | 全浏览器 | 原生支持,代码冗长 | | Fetch API | IE 不兼容 | Promise 风格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值