vue axios封装中请求头中都携带那些参数

时间: 2024-01-17 19:05:50 浏览: 93

vue+axios全局添加请求头和参数操作

走登录的接口都会返回一个token值，然后存起来方便之后调接口的时候给后台传过去，传给后台的方式有两种：（具体使用哪种需要和后台商量） 1、放在请求头中 2、放在接口的参数中 1、放在请求头中下面代码是从本地cookie中拿token VueCookie：一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器，在请求头中加token service.interceptors.request.use( config => { // 判断本地的cookie中是否有token if (VueCookie.isKey('tok 在开发Web应用时，尤其是使用Vue.js框架与后端API进行交互时，通常需要在每次请求中传递身份验证令牌（Token）。Vue+Axios的组合提供了便捷的方式来全局添加请求头和参数，确保每次请求都能携带必要的认证信息。本文将详细阐述如何实现这个功能。登录接口通常会返回一个Token，这个Token可以用于后续的接口调用，以验证用户的身份。常见的做法是将Token放入请求头或者作为接口参数传递。两种方式各有优缺点，具体使用哪一种需要与后端开发者协商。 1. 放在请求头中：使用VueCookie库来处理浏览器的Cookie。在封装的axios服务中添加请求拦截器，检查本地Cookie中是否存在Token，如果存在则将其添加到请求头的Authorization字段中。例如： ```javascript import VueCookie from 'vue-cookie'; import router from './router'; // 引入路由 service.interceptors.request.use( config => { if (VueCookie.isKey('token')) { config.headers.Authorization = VueCookie.get('token'); } else { router.push('/login'); } return config; }, error => { return Promise.reject(error); } ); ``` 要确保后端能够接收到请求头中的Token，需要在创建axios实例时设置`withCredentials: true`，这允许跨域请求携带Cookie。这可以在封装的axios服务中设置，或在全局的main.js文件中设置： ```javascript const service = axios.create({ baseURL: "http://XXXXXXXXX:XXXX", timeout: 10000, withCredentials: true // 允许携带cookie }); ``` 2. 放在接口参数中：如果选择将Token作为参数传递，可以使用本地存储（如localStorage）来获取Token。同样添加请求拦截器，根据请求类型（POST或GET）将Token添加到相应的位置： ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('ISTOKEN'); if (token) { if (config.method === 'post') { config.data = { api_token: token, ...config.data }; } else if (config.method === 'get') { config.params = { api_token: token, ...config.params }; } } else { router.push('/login'); } return config; }, error => { return Promise.reject(error); } ); ``` 在进行POST请求时，为了确保数据以JSON格式发送，需要设置请求头`Content-Type: 'application/json'`。可以通过配置axios的`transformRequest`方法来实现： ```javascript axios.defaults.transformRequest = [data => JSON.stringify(data)]; ``` 这样，每次POST请求的数据都会自动转化为JSON格式。同时，注意在传递复杂数据时，`data`参数应使用对象形式，而非字符串。总结，通过使用Vue和Axios，我们可以轻松地在全局范围内处理Token，无论是放置在请求头还是作为参数。这不仅简化了代码，还确保了在每个需要身份验证的接口调用中都能正确地传递Token，从而实现安全的API通信。在实际项目中，务必与后端团队保持良好的沟通，确保双方对于Token的处理方式达成一致。

在Vue Axios封装中，请求头中可以携带以下参数： 1. Accept：指定客户端能够接收的内容类型。 2. Content-Type：指定请求发送的数据类型。 3. Authorization：用于身份认证，通常是将token放在这里。 4. Cache-Control：指定请求和响应的缓存机制。 5. User-Agent：客户端的身份标识，可以用来区分不同的客户端。 6. Referer：指示请求的来源地址。 7. Cookie：用于存储客户端的状态信息。 8. If-Modified-Since：指定一个时间，如果请求的资源在该时间之后被修改过了，就会返回修改过的新资源，否则返回304状态码。

阅读全文

vue axios封装中请求头中都携带那些参数

相关推荐

详解vue中axios的封装

详解Vue前端对axios的封装和使用

vueaxios将axios整合到VueJS的封装

VUE封装 axios 请求

vue axios基于常见业务场景的二次封装的实现

vue中axios的封装问题(简易版拦截,get,post)

Vue.js实战之使用Vuex + axios发送请求详解

结合axios对项目中的api请求进行封装操作

vue+axios 拦截器实现统一token的案例

Vue-cli中axios封装与接口代理实战

Vue.js项目中axios的简单封装实践

Vue项目中axios的全面封装：错误处理、授权、路由与提示

前端vue如何封装axios

vue3封装axios全局使用

request axios封装

【vue】对axios二次封装

Vue3全局封装axios使用，代码示例

axios进行二次封装后，在其他文件中都有哪些引入方式

一个使用Androidstudio开发的校园通知APP

最新推荐

vue项目中axios请求网络接口封装的示例代码

vue+ts下对axios的封装实现

VUE axios发送跨域请求需要注意的问题

详解Vue用axios发送post请求自动set cookie

解决vue2中使用axios http请求出现的问题

GitHub图片浏览插件：直观展示代码中的图像

管理建模和仿真的文件

【OPPO手机故障诊断专家】：工程指令快速定位与解决

求[100，900]之间相差为12的素数对（注：要求素数对的两个素数均在该范围内）的个数

Android IPTV项目：直播频道的实时流媒体实现