前端在浏览器总报错,且获取请求头中token的值为null

前端请求总是失败说受跨域请求影响,但前后端配置已经没有问题了,如下:
package com.example.shop_manage_sys.config;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.example.shop_manage_sys.Interceptor.TokenInterceptor;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Autowiredprivate TokenInterceptor jwtInterceptor;
//cors配置@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // Applies CORS to all paths.allowedOrigins("http://127.0.0.1:8081", "http://localhost:8081") // List specific allowed origins.allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS").allowedHeaders("accept", "content-type", "origin", "custom-header","token").allowCredentials(true).maxAge(3600); }
//拦截器配置@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(jwtInterceptor).addPathPatterns("/**").excludePathPatterns("/sms/*"); // 排除不需要拦截的路径}
}
后端获取前端请求头中自定义的token字段时获取到null,这是因为浏览器端会在请求前总发出一次预检请求,后端的拦截器将这种options请求直接放行即可。
示例拦截器代码:
package com.example.shop_manage_sys.Interceptor;import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
// import org.springframework.web.servlet.ModelAndView;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.security.Keys;
import java.nio.charset.StandardCharsets;
import java.security.Key;
import org.springframework.http.MediaType;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.http.server.ServletServerHttpResponse;// import java.util.Base64;@Component
public class TokenInterceptor implements HandlerInterceptor {@Value("${jwt.secret}")private String SECRET_KEY;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {// 直接放行预检请求return true;}String token = request.getHeader("token");if (token != null && !token.isEmpty()) {try {// 验证并解析tokenKey key = Keys.hmacShaKeyFor(SECRET_KEY.getBytes(StandardCharsets.UTF_8));Jws<Claims> claimsJws = Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(token);Claims claims = claimsJws.getBody();request.setAttribute("claims", claims);return true;} catch (Exception e) {handleJwtError(response, "Invalid or expired token.");return false;}} else {handleJwtError(response, "Token is missing.");return false;}}private void handleJwtError(HttpServletResponse response, String errorMessage) {response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);response.setContentType(MediaType.APPLICATION_JSON_VALUE);response.setCharacterEncoding(StandardCharsets.UTF_8.name());try {// Wrap the ServletOutputStream in a ServletServerHttpResponseServletServerHttpResponse outputMessage = new ServletServerHttpResponse(response);// Convert the JSON string to an ObjectObject jsonContent = "{\"error\": \"" + errorMessage + "\"}";// Write the JSON content to the output streamnew MappingJackson2HttpMessageConverter().write(jsonContent, MediaType.APPLICATION_JSON, outputMessage);} catch (Exception e) {e.printStackTrace();}}// 你可以选择性实现以下方法,但在这个场景下它们可能不是必须的// @Override// public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) {// // ...// }//// @Override// public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) {// // ...// }
}
相关文章:
前端在浏览器总报错,且获取请求头中token的值为null
前端请求总是失败说受跨域请求影响,但前后端配置已经没有问题了,如下: package com.example.shop_manage_sys.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Conf…...
html+css前端作业 王者荣耀官网6个页面无js
htmlcss前端作业 王者荣耀官网6个页面无js 下载地址 https://download.csdn.net/download/qq_42431718/89571150 目录1 目录2 项目视频 王者荣耀6个页面(无js) 页面1 页面2 页面3 页面4 页面5 页面6...
在windows上使用Docker部署一个简易的web程序
使用Docker部署一个python的web服务🚀 由于是从事算法相关工作,之前在项目中,需要将写完的代码服务,部署在docker上,以此是开始接触了Docker这个工具,由于之前也没系统学习过,之后应该可能还会用…...
sqlalchemy使用mysql的json_extract函数查询JSON字段
sqlalchemy使用mysql的json_extract函数查询JSON字段 在SQLAlchemy中,如果你想要在MySQL中存储JSON字段,并且进行查询操作,可以按照以下步骤进行设置和查询: 1. 创建表格 首先,创建一个表格来存储包含JSON字段的数据。假设我们有一个名为 users 的表格,其中有一个名为…...
分类模型-逻辑回归和Fisher线性判别分析★★★★
该博客为个人学习清风建模的学习笔记,部分课程可以在B站:【强烈推荐】清风:数学建模算法、编程和写作培训的视频课程以及Matlab等软件教学_哔哩哔哩_bilibili 目录 1理论 1.1逻辑回归模型 1.2线性概率模型 1.3线性判别分析 1.4两点分布…...
JMeter介绍、安装配置以及快速入门
文章目录 1. JMeter简介2. JMeter安装配置3. JMeter快速入门 1. JMeter简介 Apache JMeter是一款开源的压力测试工具,主要用于测试静态和动态资源(如静态文件、服务器、数据库、FTP服务器等)的性能。它最初是为测试Web应用而设计的ÿ…...
GPT LangChain experimental agent - allow dangerous code
题意:GPT LangChain 实验性代理 - 允许危险代码 问题背景: Im creating a chatbot in VS Code where it will receive csv file through a prompt on Streamlit interface. However from the moment that file is loaded, it is showing a message with…...
1 LableMe安装下载
git:GitHub - labelmeai/labelme: Image Polygonal Annotation with Python (polygon, rectangle, circle, line, point and image-level flag annotation). 1 LabelMe介绍 LabelMe是一个图像标注工具,主要用于帮助研究人员和开发者创建有标签的数据集,这…...
rce漏洞-ctfshow(50-70)
Web51 if(!preg_match("/\;|cat|flag| |[0-9]|\\$|\*|more|less|head|sort|tail|sed|cut|tac|awk|strings|od|curl|\|\%|\x09|\x26/i", $c)){ system($c." >/dev/null 2>&1"); } Nl,绕过tac,cat,绕…...
vulntarget-a靶机-复现报告
靶机复现过程 测试标题 测试过程 测试外网ip 192.168.2.84 测试详情 第一步,我们先对其这个外网ip进行扫描,结果如下 结果我们发现这个ip开启了80和445端口,同时我们还可以看到这里是win7系统,我们先看看web页面是怎样的 结…...
为什么 FPGA 的效率低于 ASIC?
FPGA是“可重构逻辑”器件。先制造的芯片,再次设计时“重新配置”。 ASIC 不需要“重新配置”。你先设计,把它交给代工厂,然后制造芯片。 现在让我们看看这些芯片的结构是什么样的,以及它们的不同之处。 ● 逻辑单元:F…...
使用水星Mecury人形机器人搭建VR遥操作控制平台!
VR遥操作机械臂是一种将虚拟现实技术与机械臂控制相结合的系统,使用户可以通过虚拟现实设备操控和交互实际的机械臂。这种技术可以应用于多个领域,包括远程操作、培训、危险环境中的工作等。 双臂人形机器人是一种模拟人体上半身结构,包括头部…...
【学习笔记】无人机系统(UAS)的连接、识别和跟踪(三)-架构模型和概念
引言 3GPP TS 23.256 技术规范,主要定义了3GPP系统对无人机(UAV)的连接性、身份识别、跟踪及A2X(Aircraft-to-Everything)服务的支持。 3GPP TS 23.256 技术规范: 【免费】3GPPTS23.256技术报告-无人机系…...
uniapp bug解决:uniapp文件查找失败:‘uview-ui‘ at main.js:14
文章目录 报错内容解决方法main.js 文件中 uView 主 JS 库引入 uView 的全局 SCSS 主题文件内容修改引入 uView 基础样式内容修改配置 easycom 内容修改 报错内容 10:50:51.795 文件查找失败:uview-ui at main.js:14 10:59:39.570 正在差量编译... 10:59:43.213 文…...
Python 爬虫(爬取百度翻译的数据)
前言 要保证爬虫的合法性,可以从以下几个方面着手: 遵守网站的使用条款和服务协议:在爬取数据之前,仔细阅读目标网站的相关规定。许多网站会在其 robots.txt 文件中明确说明哪些部分可以爬取,哪些不可以。 例如&…...
【LeetCode:2766. 重新放置石块 + 哈希表】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…...
[C++]类的自动转换和强制类型转换
在C中,类的自动转换(也称为隐式转换)和强制类型转换(显式转换)是面向对象编程中处理类型之间转换的两种重要机制。这些转换允许程序员定义如何在不同类型(特别是自定义类型)之间安全地交换数据。…...
根据鼠标所在位置获取组件拿到 “qt_scrollarea_viewport” 组件的问题
问题起因: 有时候需要鼠标实时所在位置的组件,可以通过如下方法实时获取: QWidget *current_widget QApplication::widgetAt(QCursor().pos()); qDebug() << __FUNCTION__ << current_widget;// 如果是按钮,直接进行转换 QPus…...
深入浅出WebRTC—LossBasedBweV2
WebRTC 同时使用基于丢包的带宽估计算法和基于延迟的带宽估计算法那,能够实现更加全面和准确的带宽评估和控制。基于丢包的带宽估计算法主要依据网络中的丢包情况来动态调整带宽估计,以适应网络状况的变化。本文主要讲解最新 LossBasedBweV2 的实现。 1…...
就业难?誉天Linux云计算架构师涨薪班,不涨薪退学费
2024年,我国高校毕业生人数约为1179 万人,再创历史新高。根据智联招聘今年发布的《大学生就业力调研报告》,可以看到:应届生慢就业、自由职业的比重分别从去年的18.9%、13.2%增长到今年的19.1%、13.7%。 这里我们可以看出…...
基于CircuitPython与YouTube API的智能直播状态指示器制作指南
1. 项目概述与核心价值 如果你是一个内容创作者,或者你关注的某个频道正在直播,一个醒目、酷炫的“ON AIR”指示灯绝对能瞬间提升氛围感。今天要聊的这个项目,就是基于CircuitPython和YouTube API,自己动手打造一个能自动感知直播…...
碳纤维板的导电特性
简 介: 碳纤维板导电性能测试表明,其表面有机膜被刺破后会呈现导电性,电阻值从十几欧姆到几百欧姆不等,且导电性能随测量点位置变化。测试中使用尖头万用表探针穿透表面薄膜,发现同一束碳纤维连接处电阻较低࿰…...
哔咔漫画下载器:3步打造个人离线漫画库,告别网络限制烦恼
哔咔漫画下载器:3步打造个人离线漫画库,告别网络限制烦恼 【免费下载链接】picacomic-downloader 哔咔漫画 picacomic pica漫画 bika漫画 PicACG 多线程下载器,带图形界面 带收藏夹,已打包exe 下载速度飞快 项目地址: https://g…...
从脚本到爆款:ElevenLabs广告配音全流程SOP(含品牌人设音色锚定表+情绪曲线映射表)
更多请点击: https://intelliparadigm.com 第一章:从脚本到爆款:ElevenLabs广告配音全流程SOP(含品牌人设音色锚定表情绪曲线映射表) ElevenLabs 已成为全球增长最快的 AI 语音平台之一,其高保真、低延迟、…...
硬件入门 + 单片机基础(第14天)综合通信实训
ESP32 物联网结业项目:WiFi MQTT 继电器 温湿度 整合完整版 项目说明 这是物联网综合结业项目,整合了你学过的所有核心技术: WiFi 自动联网 断网重连MQTT 远程控制继电器(开关)DHT11 温湿度自动上报心跳包 消息…...
高性能WebGL地图引擎OME:海量地理空间数据可视化实战指南
1. 项目概述与核心价值 如果你在开源社区里混迹过一段时间,尤其是对数据可视化、地理信息系统或者大规模图数据渲染感兴趣,那么“sgl-project/ome”这个项目标题很可能已经引起了你的注意。OME,全称可能是“Open Map Engine”或类似的概念&am…...
U-boot QSPI驱动移植实战:从Flash适配到启动验证全解析
1. 项目概述:为什么U-boot的QSPI驱动移植是个“硬骨头”?在嵌入式系统开发,尤其是基于ARM Cortex-A系列处理器的工控、车载或高端物联网设备中,U-boot作为系统启动的“第一棒”至关重要。而QSPI(Quad SPI)接…...
GCC __builtin函数避坑指南:让你的跨平台C代码在ARM和x86上都跑得稳
GCC __builtin函数跨平台避坑实战:ARM与x86兼容性深度解析 在嵌入式开发与高性能计算领域,GCC编译器的__builtin函数集一直是开发者提升性能的利器。但当代码需要同时运行在ARM架构的嵌入式设备和x86架构的服务器上时,这些看似美妙的"魔…...
从 API Key 管理与审计日志功能看 Taotoken 的企业级安全支持
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 从 API Key 管理与审计日志功能看 Taotoken 的企业级安全支持 对于将大模型能力集成到业务流程中的企业而言,API 访问的…...
全栈AI应用开发框架Flappy:从智能体到生产级Web应用的快速构建指南
1. 项目概述:从“Flappy”到“Pleisto”的AI应用构建新范式最近在AI应用开发圈子里,一个名为“pleisto/flappy”的项目开始引起不少人的注意。乍一看这个名字,你可能会联想到那个经典的像素小鸟游戏,但此“Flappy”非彼“Flappy”…...
