Vue3+Spring Boot3实现跨域通信解决办法

Vue3+Spring Boot3实现跨域通信解决办法

  • 1 跨域是什么?
  • 2 何为同源呢?
  • 3 解决办法
    • 3.1 全局配置
      • 3.1.1 实现CorsFilter过滤器
      • 3.1.2 实现SpringMVC配置类
      • 3.1.3 创建CorsFilterFactory工厂类返回CorsFilter对象
    • 3.2 局部跨域
      • 3.2.1 注解配置
      • 3.2.2 手动设置响应头(局部跨域)

1 跨域是什么?

在这里插入图片描述

跨域资源共享(Cross-Origin Resource Sharing,CORS)是一种浏览器的安全策略,用于限制网页中的Javascript代码对不同源(Origin)的资源的访问。同源策略(Same-Origin Policy)是浏览器的一种安全特性,在发生异步请求的时候,它限制了来自不同源的页面之间的交互,以防止恶意代码窃取用户数据或执行恶意操作。

更多请看:使用Postman发送跨域请求实验

2 何为同源呢?

同源指的是协议相同、域名相同和端口相同。当网页尝试从一个源的域、协议、端口中的任何一个与当前页面不同的资源进行请求时,就会触发跨域问题。

  • 协议相同、域名相同和端口相同
  • 必须满足三者都相同

3 解决办法

3.1 全局配置

3.1.1 实现CorsFilter过滤器

创建CorsFilter过滤器类,实现过滤器方法,这个过滤器实现跨域的原理是利用了通过设置响应头来允许跨域请求。

package com.song.filter;import jakarta.servlet.*;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;import java.io.IOException;/*** @author song* @version 0.0.1* @date 2024/4/10 18:55*/
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {Filter.super.init(filterConfig);}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {HttpServletRequest httpServletRequest = (HttpServletRequest) request;HttpServletResponse httpServletResponse = (HttpServletResponse) response;httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");httpServletResponse.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");httpServletResponse.setHeader("Access-Control-Max-Age", "3600");if ("OPTIONS".equalsIgnoreCase(httpServletRequest.getMethod())) {httpServletResponse.setStatus(HttpServletResponse.SC_OK);} else {chain.doFilter(request, response);}}@Overridepublic void destroy() {Filter.super.destroy();}
}

3.1.2 实现SpringMVC配置类

这个通过实现WebMvcConfigurer 接口,重写addCorsMappings方法,手动添加CORS配置项。使用ctrl + o可以调出可重写方法。

package com.song.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** @author song* @version 0.0.1* @date 2024/4/10 19:03*/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("127.0.0.1:8081").allowedMethods("*");}
}

3.1.3 创建CorsFilterFactory工厂类返回CorsFilter对象

和上面过滤器原理差不多。上面是直接继承了Filter类。这里是使用的构造方法。

package com.song.filter;import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** @author song* @version 0.0.1* @date 2024/4/10 19:49*/@Component
public class CorsFilterFactory {@Beanpublic CorsFilter getCorsFilter(){CorsConfiguration corsConfiguration = new CorsConfiguration();//放行哪些原始请求头部信息corsConfiguration.addAllowedHeader("*");//放行哪些请求方式corsConfiguration.addAllowedMethod("*");//放行哪些原始域corsConfiguration.addAllowedOrigin("*");//是否发送 Cookie        corsConfiguration.setAllowCredentials(true);//暴露哪些头部信息corsConfiguration.addExposedHeader("*");UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);return new CorsFilter(corsConfigurationSource);}}

3.2 局部跨域

3.2.1 注解配置

在类或方法上添加如下注解,可以实现指定类下面的所有方法或单独方法实现跨域。

@CrossOrigin("*") //允许所有源
@CrossOrigin("http://localhost:5173/") //指定http://localhost:5173/
//指定多个origin,以及指定method
@CrossOrigin(value = {"http://localhost:5173/", "http://127.0.0.1:5173/"}, methods = {RequestMethod.GET})
@CrossOrigin("*")
@RequestMapping("/user")
public Map<String, String> testCORS(@RequestHeader HttpHeaders httpHeaders) {System.out.println("Origin:" + httpHeaders.getOrigin());HashMap<String, String> map = new HashMap<>();map.put("Origin", httpHeaders.getOrigin());return map;
}

3.2.2 手动设置响应头(局部跨域)

使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域,这里 Origin的值也可以设置为 “*”,表示全部放行。

@RequestMapping("/user/getCaptcha")  
public ResponseEntity<byte[]> getCaptcha(HttpServletResponse response) throws IOException {  response.addHeader("Access-Allow-Control-Origin","*"); byte[] captcha = CaptchaUtil.getCaptcha(100, 30, 4);  // 设置响应头  HttpHeaders httpHeaders = new HttpHeaders();  httpHeaders.setContentType(MediaType.IMAGE_JPEG);  httpHeaders.setContentLength(captcha.length);  return new ResponseEntity<>(captcha, httpHeaders, HttpStatus.OK);  
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/1040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot+vue社区报修便民维修网站设计与实现

便民维修网站&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、管理员管理、用户管理、维修人员管理、在线报修管理、联系客服管理、公司回访管理、基础数据管理、论坛管理、公告管理、轮播图信息&#xff0c;维修人员&#xff1b;首页、个人中心、维修人员评价管…

科研基础与工具(论文搜索)

免责申明&#xff1a; 本文内容只是学习笔记&#xff0c;不代表个人观点&#xff0c;希望各位看官自行甄别 参考文献 科研基础与工具&#xff08;YouTube&#xff09; 搜索论文 Google Scholar 谷歌学术 涵盖面太全了&#xff0c;都收录&#xff0c;就会有很多低质量的论文…

基于SpringBoot民宿入住管理系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 权限划分&#xff1a;用户和管理员 用户&#xff1a; 具有登录、注册、退出登录的功能 首页&#xff1a;可以查看民宿房间总数&#xff0c;保洁人数&#xff0c;当前入住人数&#xff0c;合计总入住人数&#xff0c;以…

Android Jetpack学习系列——Room

关于Room&#xff1a; Room是Android Jetpack组件之一&#xff0c;旨在为Android应用程序提供一种简单、强大且易于使用的本地数据库访问解决方案。 关键特性&#xff1a; 1.基于SQLite封装&#xff1a;Room是基于SQLite数据库引擎构建的&#xff0c;提供了面向对象的API来与…

stm32开发之threadx+modulex+filex+shell组件(实现命令行动态加载程序)

前言 前几篇博客基本上已经将filex、levelx、threadx、modulex、shell 组件大概都记录了一遍.本篇博客做个综合实际案例记录. 实现效果 代码程序 Modulex组件 源文件 /** Copyright (c) 2024-2024&#xff0c;shchl** SPDX-License-Identifier: Apache-2.0** Change Logs:…

2024年学浪的缓存怎么导出来

在自我成长的道路上&#xff0c;越来越多的朋友选择通过精选课程来提升自己。然而&#xff0c;面对那些服务期限有限的课程&#xff0c;怎样才能把握住知识的光芒&#xff0c;让它照亮未来的每一个角落&#xff1f;本文就教大家如何利用工具下载学浪app平台的课程 工具我已经打…

笔记本wifi连接外网 网线连接办公内网 设置路由实现内外网可同时访问

工作提供的办公网络是企业内网,接上企业内网网线后 通过无线在连接手机wifi ,会发现内外网无法同时访问,我自己电脑是接上内网网线 也是只能访问外网,除非把外网无线暂时关闭,才可以访问内网 频繁切换很不方便 1.查看外网无线 wifi网卡信息 IPv4 地址: 192.168.18.114 IP…

【Linux】iptables的应用

iptables 防火墙 防火墙是一种网络安全系统&#xff0c;它位于内部网络与外部网络&#xff08;如互联网&#xff09;之间&#xff0c;通过实施预定义的安全策略来控制网络间的通信。防火墙的主要目标是保护内部网络资源免受未经授权的访问、攻击或潜在威胁&#xff0c;同时允…

数据结构学习--环形链表

环形链表 我们在判断一个链表是否是环形的&#xff0c;即首尾相连&#xff0c;我们可以以使用快慢指针&#xff0c;如果快指针能再次追上慢指针&#xff0c;就说明该链表是环形的&#xff0c;这边可以举个操场跑步的例子&#xff0c;当操场是环形的&#xff0c;跑的快的&#…

开放式耳机哪个牌子好?热门开放式耳机合集,买前必看!

随着人们对运动健康的重视&#xff0c;越来越多的运动爱好者开始关注如何在运动中享受音乐。开放式蓝牙耳机凭借其独特的设计&#xff0c;成为了户外运动的理想选择。它不仅让你在运动时能够清晰听到周围环境的声音&#xff0c;保持警觉&#xff0c;还能让你在需要时与他人轻松…

Compose Canvas

文章目录 Compose Canvas概述Canvas属性drawPoints 绘制点drawPoints属性使用 drawLine 绘制线drawLine属性使用 drawRect 绘制矩形drawRect属性使用 drawRoundRect 绘制圆角矩形drawRoundRect属性使用 drawCircle 绘制圆drawCircle属性使用 drawOval 绘制椭圆drawOval属性使用…

《王者荣耀》Hello Kitty 小兵皮肤完整设置指南

王者荣耀与三丽鸥的联动活动上线了 Hello Kitty 小兵皮肤&#xff0c;让我们的峡谷小兵们也能穿上漂亮的衣服啦&#xff01;这款皮肤极具卡哇伊风格&#xff0c;引起了许多玩家的关注。许多小伙伴都想知道如何使用这款 Hello Kitty 小兵皮肤&#xff0c;今天小编将为大家整理出…

5.前后端分离

目录 一、前后端分离上传文件 1.在yml中设置port和localhost 2.如何使用postman测试上传文件的接口 二、如何导出excel文件 ​编辑1.在pom.xml中导包 2.在实体类中给每个字段添加注解&#xff0c;导出表格时&#xff0c;列名将会改为对应的中文 3.controller中方法的具体…

英语新概念2-回译法-lesson10

托尼斯蒂尔进来的时候我正在吃饭&#xff0c;托尼很多年前在一家律师事务所工作&#xff0c;但是他现在在银行工作。他有一份不错的薪资&#xff0c;但是他总是问他的朋友们借钱并且从不归还。托尼看到我然后走过来和我坐在同一张桌子。他从来没有问我借过钱。当他在吃饭的时候…

【OpenGL高级】罗德里格斯公式:绕任意轴旋转

相关主题&#xff1a; OpenGL 矩阵、四元数到矩阵、角度到轴、观察到轴 目录 一、说明二、罗德里格斯公式的推导2.1 空间点旋转问题2.2 对旋转问题的分析 三、罗德里格斯旋转公式矩阵表示&#xff1a;四、最小C代码五、结论 一、说明 解决三维坐标下的刚体旋转问题&#xff0…

【Linux】服务器时区 [ CST | UTC | GMT | RTC ]

目录 1. 硬件时间&#xff08;Real_TIME Clock [RTC time]&#xff09; 1.1 硬件时间简介 1.2 如何使用硬件时间 2. 系统时间&#xff08;UTC时间&#xff09;&#xff08;Universal time&#xff09; 2.1 系统时间简介 2.2 UTC时间 3. 本地时间&#xff08;Local time&…

深入理解大语言模型微调技术

一、概念解析 1、什么是微调&#xff08;Fine-tuning&#xff09;&#xff1f; 大模型微调&#xff0c;也称为Fine-tuning&#xff0c;是指在已经预训练好的大型语言模型基础上&#xff08;一般称为“基座模型”&#xff09;&#xff0c;使用特定的数据集进行进一步的训练&am…

DeepWalk论文精读

介绍 图神经网络的开山之作 DeepWalk&#xff1a;一种用于学习网络中顶点的潜在表示的新方法&#xff0c;使用随机行走中获得的局部信息&#xff0c;通过将序列视为句子&#xff0c;节点视为单词 通过随机游走可以采样出一个序列&#xff0c;序列好比一句话&#xff0c;节点…

记录一个hive中因没启yarn导致的spark引擎跑insert语句的报错

【背景说明】 刚在hive中配置了Spark引擎&#xff0c;在进行Hive on Spark测试时报错&#xff0c; 报错截图如下&#xff1a; [atguiguhadoop102 conf]$ hive which: no hbase in (/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/module/jdk1.8.0_212/bin:/opt/mod…

【LAMMPS学习】八、基础知识(3.5)计算弹性常数

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…