请求头配置记录

2023-06-30 11:12| 来源: 网络整理| 查看: 265

1、如果需要将前端头像上传的请求头配置与其他请求头配置合并到一起

可以使用以下方法：

定义一个公共的请求头配置对象，包含所有需要应用到所有请求中的头部信息，例如： const commonHeaders = { 'Authorization': 'Bearer xxxx', 'Accept-Language': 'zh-CN' } 定义一个合并后的请求头配置对象，使用 Object.assign() 函数将公共请求头和特定请求的头部信息进行合并，例如： const headers = Object.assign({}, commonHeaders, { 'Content-Type': 'multipart/form-data' })

在这个例子中，公共请求头对象 commonHeaders 包含了鉴权信息和语言信息，特定请求的请求头信息使用 Object.assign() 函数合并，最后的请求头信息包含了这些特定的请求头部信息以及前端头像上传所需的 Content-Type 头部。

在 axios 请求对象中引用合并后的请求头配置对象，例如： axios({ method: 'post', url: '上传接口的 URL', headers: headers, data: formData })

在这个例子中，headers 对象是用于传递请求头部信息的对象，包括了公共请求头和特定请求的请求头信息，使用 axios 对象的 headers 属性引用了整合后的请求头配置对象。

2、这样请求的时候请求头不会冲突吗？

不会冲突。不同的请求可以使用不同的请求头部信息，同一个请求也可以使用多个请求头部信息。只要在请求时指定了正确的请求头部信息，就不会发生冲突。

在 Axios 中，当使用 Axios 请求库发送请求时，如果在多个请求中需要使用相同的公共请求头部信息，可以将这些公共请求头部信息抽取出来，定义在请求的拦截器中添加到请求头中，只要在发送请求的时候添加想要的特定请求头，就可以使用这些额外的请求头部信息。

下面是一个将一个通用的 token 和语言信息添加到请求头的 Axios 示例代码：

import Axios from 'axios' const axios = Axios.create({ baseURL: '/api', timeout: 10000 }) // 添加请求拦截器 axios.interceptors.request.use( function(config) { // 在发送请求之前添加公共请求头部信息 config.headers.Authorization = localStorage.getItem('token') || '' config.headers['Accept-Language'] = window.navigator.language || 'zh-CN' return config }, function(error) { return Promise.reject(error) } ) // 发送请求 axios.get('/user_info', { headers: { 'Cache-Control': 'no-cache' } }).then(response => { console.log(response.data) }).catch(error => { console.log(error) })

在上面的代码中，axios 请求对象的 interceptors.request.use() 方法添加了一个请求拦截器，用于在每个请求发送前添加公共请求头部信息。

在拦截器函数中，首先获取本地存储的 token，如果 token 存在，则将其添加到请求头部的 Authorization 字段中；其次获取浏览器的默认语言，如果语言设置信息不存在，则默认使用中文 zh-CN。

当发送请求时，需要传入特定的请求头部信息，例如在示例代码中的复写缓存控制的请求头信息，默认请求头部信息会在发送前添加这些公有的请求头。

【本文地址】

公司简介

联系我们