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

news2025/1/3 16:18:27

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 {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public 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);
        }
    }

    @Override
    public 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 {
    @Override
    public 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 {

    @Bean
    public 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.coloradmin.cn/o/1610240.html

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

相关文章

9个技巧使你的Python代码更Pythonic!

如何区分漂亮和丑陋的代码&#xff1f; 更重要的是&#xff0c;如何写出漂亮的 Python 代码&#xff1f; 本文将通过初学者容易理解的例子展示9个神话般的Python技巧&#xff0c;以帮助你在日常工作中编写更多的Pythonic程序。 01 product() 使用 product() 函数避免嵌套的…

【wpf】ObservableCollection 跨线程报错问题

背景 ObservableCollection 我们之前介绍过他和List的区别。ObservableCollection 的好处在于&#xff0c;当集合发生变化时&#xff0c;能发送通知通知界面发生相应的更改。但是ObservableCollection 有个弊端。无法在非UI线程中访问。 要么就是通知失效了&#xff0c;要么就…

血的教训之虚拟机重装[包含一系列虚拟机,c++,python,miniob配置]

一切都要从头开始&#xff0c;由于脑袋糊涂&#xff0c;没看到是虚拟机的文件&#xff0c;直接一口气全删掉了&#xff0c;哎&#xff01;&#xff01;数据恢复后发现也不行&#xff0c;磁盘文件还是缺失了一部分&#xff0c;只能重新再来了。 等待ing 看不到按钮&#xff0c;按…

CSS基础:盒子模型详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃&#xff0c;大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 We…

SQLite的PRAGMA 声明(二十三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite从出生到现在&#xff08;发布历史记录&#xff09;&#xff08;二十二&#xff09; 下一篇&#xff1a;用于 SQLite 的异步 I/O 模块&#xff08;二十四&#xff09; PRAGMA 语句是特定于 SQLite 的 SQL 扩…

功能测试前景揭秘:会被淘汰吗?

在当今快速发展的信息时代&#xff0c;软件已经成为我们工作、学习乃至生活中不可或缺的一部分。随着技术的不断进步和应用的广泛普及&#xff0c;软件测试作为保障软件质量和功能实现的关键步骤&#xff0c;其职业发展路径也受到了广泛的关注。特别是针对功能测试这一细分领域…

踏上R语言之旅:解锁数据世界的神秘密码(二)

R语言学习 文章目录 R语言学习1.数据的R语言表示2.多元数据的R语言调用3.多元数据的简单R语言分析 总结 1.数据的R语言表示 数据框&#xff08;data frame) R语言中用函数data.frame()生成数据框&#xff0c;其句法是&#xff1a; data.frame(data1,data2,…)&#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…

【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&…

webpack源码分析——enhanced-resolve库之getType、normalize、join和cachedJoin函数

一、PathType 路径类型 const PathType Object.freeze({Empty: 0, // 空Normal: 1, // 默认值Relative: 2, // 相对路径AbsoluteWin: 3, // win 下的绝对路径AbsolutePosix: 4, // posix 下的绝对路径Internal: 5 // enhanced-resolve 内部自定义的一种类型&#xff0c;具体是…

颠覆传统消费,走向可持续:每次购物都是循环的开始

亲爱的读者朋友们&#xff0c;大家好&#xff0c;我是微三云周丽。今天&#xff0c;我非常激动地想要向大家分享一种极具创新性和前瞻性的商业模式——循环购。这种模式将消费返利与积分返利理念相融合&#xff0c;为商家与消费者之间搭建了一座互动与共赢的桥梁&#xff0c;让…

安全开发实战(1)--Cdn

目录 安全开发专栏 CDN介绍 1.信息收集阶段 1.1判断CDN是否存在 1.1.1, One 1.1.2,Two(改进) 1.1.3,进行整合 增加输入功能 1.1.4 批量读取监测存储(进行测试) 问题1: 问题2: 解决方案: 1.1.4 基本编写完成 命令框中: cdn存在.txt 总结 这里我是根据整个渗透测…

【spring】springProperty 使用

springProperty 是一个在 Spring 框架中使用的SpEL&#xff08;Spring Expression Language&#xff09;表达式&#xff0c;它允许你在应用程序的配置中引用 Spring 应用程序上下文中的属性值。这个表达式通常用于从 Spring 的 Environment 对象中获取配置属性的值&#xff0c;…

【Java探索之旅】用面向对象的思维构建程序世界

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、初识面向对象1.1 什么是面向对象&#xff1f;1.2 面向对象与面向过程 二、类的定义…

HDLbits 刷题 -- Adder100

Create a 100-bit binary adder. The adder adds two 100-bit numbers and a carry-in to produce a 100-bit sum and carry out. 译&#xff1a; 创建一个100位二进制加法器。加法器将两个100位的数字和一个进位相加&#xff0c;产生一个100位的和并执行。 个人解法&#xf…

短视频素材哪里去找?推荐几个视频素材免费下载的网站

高质量的资源&#xff0c;会让你的视频创作更加生动和具有吸引力。下面我为你介绍世界各地的优质无水印视频素材网站&#xff0c;以拓宽你的创作视野&#xff0c;帮助你在这个视觉革命的时代中脱颖而出。 1. 蛙学府&#xff08;中国&#xff09; 提供各种类别的优质高清视频素…

【Linux C | 多线程编程】互斥量、信号量、条件变量对比总结

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 本文未经允许…

【UKE!】2024.4.19

2024.4.19 【你知道的都是真相。只可惜那些并不是真相的全部。】 Friday 三月十一 谷雨 <BGM “谷雨–音阙诗听”> AC :Answer Coarse,粗劣的答案 ​ CE :Compile Easily,轻松通过 ​ PC :Perfect Compile 完美的编译 ​ WA :Wonderful Answer,好答案 ​ RE :Run Exce…

【Java开发指南 | 第十六篇】Java数组及Arrays类

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 数组数组特点创建数组处理数组多维数组Arrays类 数组 Java中的数组是一种用来存储固定大小的相同类型元素的数据结构。 数组特点 数组具有以下特点&#xff1a; 1、固定大小: 一旦数组被创建&#xff0c;其…

【云计算】云数据中心网络(五):对等连接

《云网络》系列&#xff0c;共包含以下文章&#xff1a; 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC云数据中心网络&#xff08;二&#xff09;&#xff1a;弹性公网 IP云数据中心网络&#xff08;三&#xff09;…