Vue项目中axios请求的时候使用localStorage去拼接报的401错误

最新推荐文章于 2023-08-08 10:49:50 发布
最新推荐文章于 2023-08-08 10:49:50 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44691513/article/details/114589911
版权

在我上一篇博客所说的项目中的userinfo组件中，当在请求的时候会发生401错误，我们只要添加上请求头即可。

 Headers : {
          'Authorization': 'Bearer ' + localStorage.getItem("token"),
        },

在这里插入图片描述

react前端axios使用jwt token依然401 踩坑
OnTheway
04-07 1231
调试完成Django drf jwt授权后在前端使用token请求授权接口依然是401，没有直接处理完成，记录处理过程以便分析 请求与生成token供前端使用参见《前后端分离使用drf jwt的token鉴权》 准备 axios使用用户名与密码获取token 并存储在localstorage中 let user = 'testuser' let pass = 'testpassword' axios.post('http://localhost:8008/Plum/get
vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
热门推荐
JCat的博客
09-03 10万+
vue项目的前期配置 封装axios实例 封装API
Vue获取并存储服务器返回的AuthorizationToken信息并给每次请求添加上token
csonst1017的博客
01-02 1万+
版权声明：欢迎转载，注明作者和出处就好！如果不喜欢或文章存在明显的谬误，请留言说明原因再踩哦，谢谢，我也可以知道原因，不断进步！ https://blog.youkuaiyun.com/csonst1017/article/details/85329865 由于后台是用jwt的token进行身份权限验证，后台在登录后把token添加响应头里，所以前台需要把这个token存放起来，并给每次请求的请求头添加上to...
vue axios 401登录过期返回登录页
likuntao123的博客
05-10 4646
vue axios 401登录过期返回登录页 在interceptor.js拦截器里封装axios响应状态处理 import axios from 'axios' import $router from '@/router' import { MessageBox, Message } from 'element-ui' // create an axios instance const http = axios.create({ serverUrl: serverUrl, withCrede
axios拦截器判断401 / 全局给header添加token
weixin_30336061的博客
07-25 1108
https://www.cnblogs.com/guoxianglei/p/7084506.html axios.interceptors.request.use(function (config) { // 这里的config包含每次请求的内容 let token = getToken() if (token) { config.headers.Author...
【Vue3】localStorage读取数组并赋值的问题
菜就多练
08-08 707
今天在写项目用到localStorage进行存储并读取数据，并将读取到的数据存放到列表的时候，发现vue3不能直接对数组进行赋值。因为Vue3的响应式是proxy，对所有的数据进行了拦截。可以看出来JSON.parse（）解析出来是一个数组，里面包含很多对象。现在的问题变成了如何从数组中取出每个对象的值，并将它们存放到数组中。
vue+axios全局添加请求头和参数操作
11-20
在开发Web应用时，尤其是使用Vue.js框架与后端API进行交互时，通常需要在每次请求中传递身份验证令牌（Token）。Vue+Axios的组合提供了便捷的方式来全局添加请求头和参数，确保每次请求都能携带必要的认证信息。本文...
前端项目中的接口统一管理（以vue项目和axios插件为例）
nian_cj的博客
04-06 1722
如果觉得中间废话多，请直接跳过，直接看下面代码就好了，不闲扯直接开始！ 平时我们项目中调用后端接口的例子： <script> // 其他东西咱就省略了 // 引入插件 import axios from "axios"; export default { data() { return {}; }, methods: { m_getList() { axios...
Vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
开源世界
11-27 1633
前言 在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来时候来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cli项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。 正式配置路线： 拿到项目及后台接口，首先做的是配置全局代理及第二点。 全局封装axios及第三点request.js。 过滤axios请求方式，控制路径及参数的格式及第四点http.js。 正式封装api及第五点api.js。 页面调
axios全局注册,设置token,以及全局设置url请求网段的方法
10-17
这段代码将axios赋值给Vue实例的`$axios`属性，使得在Vue组件中可以通过`this.$axios`直接调用axios的方法，如发送POST请求： ```javascript this.$axios.post("/login", this.form) .then((response) => { // ...
vue axios里的值取不到？——箭头立即执行函数解决axios异步问题
u012914342的博客
03-31 1237
刚入职那会，经常因为取不出来值去问师傅，其中大多数情况都是因为axios的值取不出来。总结之后发现，除了改变执行顺序之外，还可以通过箭头立即执行函数解决这个问题 首先我们来猜一下这种情况，打印的会是什么？ method () { this.text = '' axios请求.then(res => {this.text = '三火Sunfire'}) if (this.text === '') { console.log('啥也没有呀') } el
localStorage.setItem(“a“)运行后，接着运行getItem(“a“)获取不到值?
weixin_46543056的博客
12-16 4587
localStorage.setItem(“a”,“12345”)运行后，接着运行getItem(“a”)获取不到值? 一般情况下，如下： localStorage.setItem("a","12345"); localStorage.getItem("a"); 是能得到a的值的。 在开发中，localStorage.getItem("a");获取不到，很多是因为运行逻辑是getItem在前面执行了； 如： let obj={ a:localStorage.getItem("a"); }; localS
vue axios 网络状态status=401的时候，接收服务器返回的数据
武当山道士的博客
09-07 1607
为啥服务器网络status=401时候，前端无法获取到服务器的数据了呢？ 原因： 因为 axios 默认抛弃了 网络状态不在 [200, 300) 区间的服务器返回 解决方案： 所以如果项目需要返回此区间以外的状态码(比如： 401)，那么需要改axios的库文件： 库文件所在位置：node_modules/axios/lib/core/settle.js 第16行 原代码如下: if (!response.status || !validateStatus || validateStatus(resp
vue+axios 实现登录拦截权限验证
weixin_43045869的博客
04-03 1590
一、前端路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面。 const routes = [ { path: "/", name: "/", component: Index }, { path: "/repository", name: "r
vue前端请求数据遇到401，token失效等错误
qq_37875903的博客
07-24 1万+
我现阶段遇到的两种可能： 1、检查axios调用接口时传递的参数格式是否正确 2、在main.js中检查http request 请求拦截器是否配置上token 接下来主要是对第二种问题做出解答： //http request 请求拦截器，有token值则配置上token值 http.interceptors.request.use(config => { config.headers.token= window.localStorage.getItem('token') return
fetch 用form Data 格式 发送数据（带json格式的参数）
Akukudeteng的博客
10-22 6032
坑： 1.fetch如何使用form Data 格式 发送数据？ 答：使用 var formData = new FormData(); formData.append('developerId', '633');//传参数 2.在控制台发现Content-Type:multipart/form-data ；而且数据没有发送成功，后面也没有boundary的分割？ 答：不要在头部设置'Content-Type':'multipart/form-data;', hea...
vue中axios请求拦截器和响应拦截器 以及401状态处理
^_^
06-17 1万+
一、axios 在vue中啊 我们不需要去用原生XHR去发 ajax，因为啊 原生js写起来比较繁琐，并不易我们去开发， 我们可以通过axios去发ajax？看到axios不要觉得新词就很陌生 官网： axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Pro...
axios在后端返回401时,获取不到error.response和返回的状态码问题
shsongtao的博客
05-31 4万+
在axios中爬过的坑 项目是后端采用的grails + spring cloud + gorm + es等插件做的, 前端采用的是element + axios + vue等,身份认证采用的是spring cloud oauth2.0 . 开发采用的是gradle搭建,语言使用的是groovy 在搭完框架后,正常流程postman都能跑的通,但是如果使用 axios就会遇到跨域问题 然后就...
axios请求的数据怎么接受
最新发布
04-02
<think>好的，我现在需要帮助用户了解如何接收和处理Axios请求返回的数据。首先，我得回忆一下Axios的基本用法和响应结构。根据用户提供的引用内容，尤其是引用[2]提到Axios的响应结构包括data、status、statusText、headers和config。所以，我应该先从响应对象的结构讲起。 用户可能已经知道如何发送请求，但不太清楚如何提取数据。因此，我需要详细说明如何通过.then()或async/await来获取响应对象，并访问其中的data属性。比如，使用.then(response => { console.log(response.data) })或者async函数中的const res = await axios.get(...); console.log(res.data)。 然后，用户可能遇到不同HTTP方法（如GET、POST）的参数传递问题。根据引用[3]，GET方法通常使用ctx.query接收参数，而POST使用ctx.request.body。在Axios中，GET请求参数可以通过params配置项传递，POST数据则放在data属性里。这部分需要明确说明，避免混淆。 错误处理也是关键。用户需要知道如何处理网络错误或后端返回的错误状态码。可以介绍使用.catch()来捕获错误，或者检查response.status进行自定义处理。比如，在响应拦截器中统一检查状态码，如引用[1]提到的统一处理错误信息。 另外，引用[1]提到统一处理响应数据，这可能涉及到使用拦截器（interceptors）。我应该建议用户在axios实例中添加响应拦截器，对res.data进行统一处理，比如提取特定字段或处理错误码。 还要考虑不同的场景，比如文件上传或需要路径参数的接口（如/api/file/:fid），这时需要拼接URL，如引用[3]中的例子。这里要提醒用户注意路径参数的替换和传递方式。 最后，生成相关问题时要覆盖用户可能进一步想知道的内容，比如错误处理的具体方法、不同HTTP方法传参的区别、拦截器的使用，以及如何接收二进制数据等。这些问题能够帮助用户深入理解相关知识点。 现在需要确保回答结构清晰，分步骤说明，并引用提供的资料来增强可靠性。同时，注意使用正确的中文表达和LaTeX格式（虽然这个问题中可能用不上数学公式，但需检查是否有其他需要格式化的地方）。避免使用Markdown，保持口语化，但按照用户的要求，回答需要是正式的中文，结构清晰。</think>### 如何接收和处理 Axios 请求的响应数据？ #### 1. **Axios 响应结构** Axios 的响应对象包含以下核心字段[^2]： - `data`：服务器返回的主体数据（自动解析为 JSON 或字符串） - `status`：HTTP 响应状态码（如 200、404） - `statusText`：HTTP 状态描述（如 "OK"、"Not Found"） - `headers`：响应头信息 - `config`：请求的配置信息 示例代码： ```javascript axios.get('/api/user') .then(response => { console.log(response.data); // 核心数据 console.log(response.status); // 状态码 }) .catch(error => { console.error(error); // 网络或响应错误 }); ``` --- #### 2. **接收数据的关键方法** **(1) 使用 `.then()` 链式调用** ```javascript axios.post('/api/login', { username: 'test', password: '123' }) .then(res => { const token = res.data.token; // 提取服务端返回的 token localStorage.setItem('token', token); }); ``` **(2) 使用 `async/await` 语法** ```javascript async function fetchData() { try { const res = await axios.get('/api/file/123'); // 路径参数示例[^3] const fileInfo = res.data; // 接收文件信息 } catch (err) { console.error('请求失败:', err.response?.data); } } ``` --- #### 3. **参数传递与接收** | 请求类型 | Axios 配置项 | 服务端接收方式 | |----------|--------------|---------------------------| | GET | `params` | `ctx.query` (URL 查询参数)| | POST | `data` | `ctx.request.body` | 示例： ```javascript // GET 请求带查询参数 axios.get('/api/search', { params: { keyword: 'vue' } }); // POST 请求传 JSON axios.post('/api/upload', { file: fileData, type: 'image' }); ``` --- #### 4. **统一响应处理（进阶）** 通过 **拦截器** 可全局处理响应[^1]： ```javascript // 响应拦截器 axios.interceptors.response.use( res => { if (res.status === 200) { return res.data; // 直接返回核心数据 } else { return Promise.reject(res.statusText); } }, err => { // 统一处理网络错误 alert(`请求异常: ${err.message}`); return Promise.reject(err); } ); ``` 处理后可直接用 `res` 获取 `data`： ```javascript axios.get('/api/data').then(res => console.log(res)); ``` --- #### 5. **特殊数据类型处理** - **二进制数据**：需设置 `responseType: 'blob'` ```javascript axios.get('/api/download', { responseType: 'blob' }) .then(res => { const url = URL.createObjectURL(res.data); // 创建下载链接 }); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值