首页 > 其他分享 >Vue3+Spring Boot3实现跨域通信解决办法

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

时间:2024-04-10 20:30:40浏览次数:25  
标签:Origin 跨域 Spring springframework Boot3 import org public

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

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);  
}

标签:Origin,跨域,Spring,springframework,Boot3,import,org,public
From: https://blog.csdn.net/weixin_45248370/article/details/137384512

相关文章

  • Spring Actuator实现定制端点
    HTTP方式的实现就是借助SpringActuator。在微服务健康监控之SpringActuator是什么?中已经实践了原生端点端点用户,对该种类型端点可以进行定制。定制端点通过endpoints+端点名+属性名来设置,每段之间用.隔开。具体操作如下:1)修改端点id2)开启端点比如开启shut......
  • Springboot计算机毕业设计钓鱼助手小程序【附源码】开题+论文+mysql+程序+部署
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着人们生活水平的提高和休闲方式的多样化,垂钓作为一种传统的休闲活动,逐渐受到越来越多人的青睐。然而,对于许多垂钓爱好者来说,获取准确、全面的垂钓......
  • Springboot计算机毕业设计短视频微信小程序【附源码】开题+论文+mysql+程序+部署
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着移动互联网的深入发展,短视频以其直观、生动、富有创意的特性,迅速成为了人们生活中不可或缺的一部分。微信小程序作为一种轻量级应用,其即用即走的......
  • 【SpringBoot实战篇】注册接口
    目录1 明确需求 2 阅读接口文档2.1基本信息2.2请求参数2.3响应数据3思路分析(1)UserController(2)UserService(3)UserMapper4开发4.1三层架构(1)UserController.java(2)UserService(3)UserMapper.java4.2工具类5 测试......
  • 基于Spring Boot的毕业设计系统设计与实现
    目录一、前言二、技术介绍三、系统实现四、论文参考五、核心代码六、其他案例七、源码获取​​​​​​​作者介绍:✌️大厂全栈码农|毕设实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。✌️作者博客:曾几何时​​​​​​​......
  • SpringBoot整合Mybatis3 Dynamic Sql
      前置条件:CREATETABLE`volunteer`(`vt_id`int(11)NOTNULLAUTO_INCREMENTCOMMENT'志愿者id',`vt_integral_count`int(11)DEFAULTNULLCOMMENT'剩余总积分',`vt_avatar`varchar(255)DEFAULTNULLCOMMENT'头像',`vt_name`va......
  • Springboot 添加 WebSocket 服务
    后端WebSocketServer.java文件:packagecom.ruoyi;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.stereotype.Component;importorg.springframework.stereotype.Service;importjavax.websocket.*;importjavax.websocket.ser......
  • 免费分享Springboot+Vue的停车场管理系统源码,真酷啊
    今天给大家分享一套基于Springboot+Vue的停车场管理系统源码,在实际项目中可以直接复用。(免费提供,文末自取)一、系统运行图1、登陆页面2、车位管理3、车辆进出管理设计一个SpringBoot+Vue的停车场管理系统时,需要注意以下细节:1.用户权限管理:确保系统具有不......
  • docker离线部署Springboot项目
    首先先准备好项目jar包和Dockfile文件Dockfile文件配置如下:点击查看代码#拉取基础镜像FROMopenjdk:11#类似于作者MAINTAINERdpf#创建镜像目录RUNmkdir-p/htht/server/logs\/htht/server/temp\/htht/skywalking/agent#工作区WORKDIR/htht/server......
  • 基于SpringBoot+MySQL+SSM+Vue.js的宠物商城系统(附论文)
    演示视频基于SpringBoot+MySQL+SSM+Vue.js的宠物商城系统技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的宠物商城系统(附论文),用......