前端发起请求时添加自定义Headers

// 添加请求拦截器
uni.addInterceptor('request', {
    invoke(args) {
        // 在这里可以修改请求参数
        args.header = args.header || {};
        //添加自己需要的字段
        args.header['Authorization'] = 'Bearer your_token'; // 自定义字段
        args.header['Field'] = 'val'; // 自定义字段
    },
    success(response) {
       
        return response;
    },
    fail(error) {
       
        return Promise.reject(error);
    }
});

在main.js中添加以上拦截器代码,全局request接口都会带上此header信息

### 如何在浏览器HTTP请求头添加或设置Token 要在浏览器中的HTTP请求头添加或设置Token,可以通过多种方式实现。以下是几种常见的方法及其具体操作: #### 方法一:通过前端框架(如Axios)配置全局拦截器 可以利用 Axios 提供的请求拦截功能来自动为每次请求附加 Token。这种方式适用于基于 Vue 或 React 的项目。 ```javascript // 添加请求拦截器 axios.interceptors.request.use( function(config) { // 如果存在 token,则将其添加到每个请求的 header 中 if (sessionStorage.getItem("token")) { config.headers.common["Authorization"] = `Bearer ${sessionStorage.getItem("token")}`; } return config; }, function(error) { // 处理请求错误 return Promise.reject(error); } ); ``` 上述代码会在发送任何请求前检查是否有存储的 Token,并将其加入到请求头部[^2]。 #### 方法二:手动指定单次请求的 Header 配置 对于特定场景下的 POST 请求或其他类型的请求,可以直接在调用 API 设定 Headers 参数。 ```javascript import axios from 'axios'; const postDataWithToken = async (url, data, token) => { try { const response = await axios.post(url, data, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); console.log(response.data); } catch (error) { console.error('Error during posting:', error); } }; // 使用示例 postDataWithToken('https://api.example.com/data', { key: 'value' }, 'your-auth-token'); ``` 此方法适合于仅需针对某些特殊接口传递认证信息的情况[^4]。 #### 方法三:直接修改 XMLHttpRequest 对象属性 如果不使用第三方库而依赖原生 JavaScript 实现网络通信的话,也可以直接调整 XHR 实例的相关选项。 ```javascript function sendRequestWithToken(method, url, body, token) { var xhr = new XMLHttpRequest(); xhr.open(method.toUpperCase(), url, true); // 设置必要的headers xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.setRequestHeader('Authorization', `Bearer ${token}`); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } }; xhr.send(body ? JSON.stringify(body) : null); } sendRequestWithToken('GET', '/page/home', undefined, 'webapp_token_abc123'); ``` 这种方法展示了不借助额外工具的情况下如何向服务器提交带授权凭证的数据流[^1]。 #### 跨域问题注意事项 需要注意的是,在涉及跨源资源共享(CORS)的应用场合下,一旦尝试自定义 HTTP 请求头比如 Authorization ,则实际执行流程里会先触发一次 OPTIONS 类型的方法询问目标资源所在站点是否接受此类定制化连接形式。如果没有适当配置 CORS 政策,则可能导致预期之外的行为发生,例如被拒绝访问等问题出现[^3]。 --- ### 总结 综上所述,无论是采用现代化开发环境里的自动化解决方案还是回归基础层面的手动控制手段都可以有效地完成任务需求——即将安全令牌嵌入至客户端对外发起的所有数据交换过程中去。不过考虑到用户体验以及维护便利性的因素建议优先选用前者即集成现有成熟技术栈所提供的便捷特性来进行处理工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值