DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) { header = normalizeHeader(header);
场景:token过期,然后更新了token 重新发起请求获取数据 ;
代码:使用上一次的错误请求配置报错 return request(error.config) ;
解决 :
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// console.log({ response });
// 对响应数据做点什么
console.log("响应拦截器成功的");
console.log("token没有过期");
console.log(response);
return response;
},
async function (error) {
// 错误原因:1. 没有登录本地没有存储token 2. token过期了 (注意是token 不是refresh_token过期了)
// 对响应错误做点什么 token 过期或者没有携带token
/**
*
第一次是每次请求都会携带本地的短token,
如果某一次出错即是短token失效,
第二次那个401是你请求使用长token刷新短token的错误代码;
*/
console.log("响应拦截器失败的");
console.log(error.config);
if (error.response && error.response.status === 401) {
// console.log("token过期了,跳转到登录页面");
// router.push("/login");
// 出现 401 错误 则说明短token过期了 需要执行刷新token逻辑
const user = store.state.user; // 从 vuex == 本地获取 user
// 如果本地没有token存储就去登录页面,没有token就是没有登录 不存在过期问题
if (!user) {
console.log("没有登录,本地没有token,直接去登录页面");
return router.push("/login");
}
// 有token 说明已经登录了 可能是登录token过期问题 我们就刷新token
// 可以把本地的token 或者 refresh_token修改然后测试token过期问题
try {
// 发起更换token的请求 参数是 refresh_token
console.log("发起更换token的请求");
console.log("token过期了");
// await refreshTokenApi(user.refresh_token) ; // 坑 !!! 不能使用 rquest 实例发起请求 因为在请求拦截器统一了token(使用的是token) 但是我封装的更新tokne接口使用的是 refresh_token 故我们要使用干净的 axios 去发起请求
const { data } = await axios({
url: "http://toutiao.itheima.net/v1_0/authorizations",
method: "put",
// 设置请求头
headers: {
Authorization: `Bearer ${user.refresh_token}`,
},
});
// 把返回的新token 保存起来
store.commit("setUserToken", {
token: data.data.token,
refresh_token: user.refresh_token,
});
// 继续上一次的出错请求(因为token导致的) 请求userInfo数据出错了
// 然后我更新了token 重新发起请求 请求 userInfo 数据
// return request(error.config) // 把之前的错误配置项传入传入即可 现在的配置项是正确的 (因为token更新了)
// return request(error.config); // 这句是错误的 因为 axios 更新升级了 之前的配置项的请求头如果在就不做调整了(不在修改了)
// console.log({
// ...error.config,
// headers: {},
// });
// ... 剩余参数在对象里面的使用
// console.log({ ...{ type: "get" }, name: "zlx" });
// {type: 'get', name: 'zlx'}
// return request({
// ...error.config,
// headers: {},
// });
} catch (err) {
// 原因 : 这里出错了说明我的更新token报错了 说明是长token(就是refresh_token )过期了
// ps:此项目的token过期时间 2 小时 refresh_token 过期时间 15 天
if (error.response && error.response.status === 401) {
console.log("refresh_token过期了 重新登录");
return router.push("/login");
} else {
// 或者其它网络错误
console.log("Promise.reject(err)是个啥");
return Promise.reject(err);
}
}
}
return Promise.reject(error);
}
);
DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) { header = normalizeHeader(header);的更多相关文章
- Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
在设置请求头的时候报这个Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPE ...
- vue 运行项目时,Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
npm run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...
- Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
解决方案:url前面一定要加http://
- mui.min.js:7 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
mui框架做的微信公众号网页,在上传数据的时候报了这个错,async: true,//将false改为true就可以了 https://blog.csdn.net/liuzp111/article/d ...
- DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL 未能在“xmlhttpRequest”上执行“open”:无效的URL。
出现这个报错主要是baseurl:http://192.168.*.*/后面的(/)或是请求里面的url:/user/login中前面的(/)有一个漏掉了,导致合成的路径不完整,所以报错:无效的URL
- Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...
- 使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...
- wordpress 点击文章图片 不能编辑(chrome下面) wordpress Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
说明:在chrome下面,编辑文章插入的图片,点击到图片上面,没有菜单显示. 报错: tinymce.min.js:10 Uncaught DOMException: Failed to execut ...
- NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load xxxx错误解决方法
在开发项目的过程中,和后端对接,我们使用是一个成熟的集成很全面的架构JHipster.后端为java spring-boot 前端ts+react,需求是有一个需要在页面里嵌套iframe的需求.然后 ...
- 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...
问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...
随机推荐
- 【Hibernate】Re03 注解方式实现
使用JPA规范提供的注解即可实现,这样的好处是不需要配置Entity.hbm.xml文件了 但是考虑到多表查询的情况,还是会有xml配置的需要. 一.常用的JPA注解: 1.public @inter ...
- 人形机器人(humanoid)(双足机器人、四足机器人)—— 操控员 —— 机器人数据收集操作员
参考: https://www.youtube.com/watch?v=jbQ4M4SNb2M 机器人数据收集操控员,就和大模型训练数据收集员.数据类型标识员(打标签人员)一样,都是为了人工生成AI训 ...
- 【转载】 NVIDIA RTX2080ti不支持P2P Access,这是真的么?
原文地址: http://www.gpus.cn/gpus_list_page_techno_support_content?id=30 ------------------------------- ...
- 《Python数据可视化之matplotlib实践》 源码 第二篇 精进 第五章
图 5.1 import matplotlib.pyplot as plt import numpy as np from matplotlib.ticker import AutoMinorLoca ...
- 新购的HP品牌台式机(暗影精灵,自带windows10系统,显卡为RTX2080,CPU为i7-10700)安装双系统(Ubuntu系统),不识别显卡,不识别硬盘 —— 解决方案
事件起因是实验室的师弟要弄深度学习,实验室为其新购一台台式机(HP台式机,暗影精灵,自带windows10系统,显卡为RTX2080,CPU为i7-10700),师弟是满心喜悦的在windows系统上 ...
- 国产首款IDE环境:数字广东公司联合麒麟软件打造的国内首款适配国产操作系统、蜘蛛创新的集成开发环境CEC-IDE正式亮相
参考: https://www.youtube.com/watch?v=fOpBEWZVKU0 在中国it历史上继"木兰编程语言(实际上套壳Python),红旗操作系统(实际上套壳Chrom ...
- model.train方法的dataset_sink_mode参数设置为False时以step作为单位打印数据——(只在mode=context.GRAPH_MODE下成立,在mode=context.PYNATIVE_MODE模式下不成立)
如题: 官方中的内容支持: https://www.mindspore.cn/tutorial/training/zh-CN/r1.2/advanced_use/summary_record.html ...
- 支付宝支付java版实战(含视频讲解)
1.背景 实际开发中用到支付宝支付的概念非常大...... 这里重点分析一下支付宝支付实际生产必须要实现的功能 1.获取支付链接(统一下单) 2.支付回调(异步通知) 3.统一下单交易查询 4.退款 ...
- 词云图大师(WordCloudMaster)上线Web端!
我们非常激动地宣布,词云图大师(WordCloudMaster)现已正式上线Web端!这一全新版本为用户带来了更多的便捷和功能,让创建和分享词云变得更加轻松.无论是企业.教育机构还是个人用户,都可以通 ...
- blender-1-基本快捷键
https://www.bilibili.com/video/BV14u41147YH?p=3&vd_source=e3899eab0ab1c2da60e189bdce9ed666 跟他学的 ...