Springboot解决跨域问题方案总结(包括Nginx，Gateway网关等)

news2024/12/23 3:37:52

🏷️个人主页：牵着猫散步的鼠鼠 

🏷️系列专栏：Java全栈-专栏

🏷️个人学习笔记，若有缺误，欢迎评论区指正

目录

前言

解决跨域问题方案

1.Spring Boot 中解决跨域

1.1 通过注解跨域

1.2 通过配置文件跨域

1.3 通过 CorsFilter 跨域

1.4 通过 Response 跨域

1.5 通过 ResponseBodyAdvice 跨域

2.Nginx 中解决跨域

3.网关中解决跨域

3.1 配置文件中设置跨域

3.2 添加 CorsWebFilter 来解决跨域问题

小结

前言

跨域问题是浏览器为了保护用户的信息安全，实施了同源策略（Same-Origin Policy），即只允许页面请求同源（相同协议、域名和端口）的资源，当 JavaScript 发起的请求跨越了同源策略，即请求的目标与当前页面的域名、端口、协议不一致时，浏览器会阻止请求的发送或接收。

解决跨域问题方案

跨域问题可以从以下方面解决：

  1. 应用层面解决：例如 Spring Boot 项目中解决跨域问题。
  2. 反向代理解决：例如 Nginx 中解决跨域问题。
  3. 网关中解决：例如 Spring Cloud Gateway 中解决跨域问题。

而这 3 类解决方案，总共包含了 8 种解决方案，我们一起来看。

1.Spring Boot 中解决跨域

在 Spring Boot 中跨域问题有以下 5 种解决方案：

  1. 使用 @CrossOrigin 注解实现跨域【局域类跨域】
  2. 通过配置文件实现跨域【全局跨域】
  3. 通过 CorsFilter 对象实现跨域【全局跨域】
  4. 通过 Response 对象实现跨域【局域方法跨域】
  5. 通过实现 ResponseBodyAdvice 实现跨域【全局跨域】

接下来详细来看。

1.1 通过注解跨域

使用 @CrossOrigin 注解可以轻松的实现跨域，此注解既可以修饰类，也可以修饰方法。当修饰类时，表示此类中的所有接口都可以跨域；当修饰方法时，表示此方法可以跨域，它的实现如下：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
@RestController
@CrossOrigin(origins = "*") //origins可以指定请求来源，*代表全部
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test() {
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

以上代码的执行结果如下图所示： 

 从上图中可以看出，前端项目访问另一个后端项目成功了，也就说明它解决了跨域问题。

优缺点分析

此方式虽然虽然实现（跨域）比较简单，但细心的朋友也能发现，使用此方式只能实现局部跨域，当一个项目中存在多个类的话，使用此方式就会比较麻烦（需要给所有类上都添加此注解）。

1.2 通过配置文件跨域

通过设置配置文件的方式就可以实现全局跨域了，它的实现步骤如下：

  • 创建一个新配置文件。
  • 添加 @Configuration 注解，实现 WebMvcConfigurer 接口。
  • 重写 addCorsMappings 方法，设置允许跨域的代码。

具体实现代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration // 一定不要忽略此注解
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
        .allowCredentials(true) // 是否发送 Cookie
        .allowedOriginPatterns("*") // 支持域
        .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
        .allowedHeaders("*")
        .exposedHeaders("*");
    }
}

1.3 通过 CorsFilter 跨域

此实现方式和上一种实现方式类似，它也可以实现全局跨域，它的具体实现代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration // 一定不能忽略此注解
public class MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {
        // 1.创建 CORS 配置对象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOriginPattern("*");
        // 是否发送 Cookie
        config.setAllowCredentials(true);
        // 支持请求方式
        config.addAllowedMethod("*");
        // 允许的原始请求头部信息
        config.addAllowedHeader("*");
        // 暴露的头部信息
        config.addExposedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 对象
        return new CorsFilter(corsConfigurationSource);
    }
}

1.4 通过 Response 跨域

此方式是解决跨域问题最原始的方式，但它可以支持任意的 Spring Boot 版本（早期的 Spring Boot 版本也是支持的）。但此方式也是局部跨域，它应用的范围最小，设置的是方法级别的跨域，它的具体实现代码如下：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
@RestController
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test(HttpServletResponse response) {
        // 设置跨域
        response.setHeader("Access-Control-Allow-Origin", "*");
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

1.5 通过 ResponseBodyAdvice 跨域

通过重写 ResponseBodyAdvice 接口中的 beforeBodyWrite（返回之前重写）方法，我们可以对所有的接口进行跨域设置，此方法是基于AOP切面实现的，它的具体实现代码如下：

import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;

@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice {
    /**
     * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写）
     * 返回 true 表示重写
     */
    @Override
    public boolean supports(MethodParameter returnType, Class converterType) {
        return true;
    }
    /**
     * 方法返回之前调用此方法
     */
    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,
                                  Class selectedConverterType, ServerHttpRequest request,
                                  ServerHttpResponse response) {
        // 设置跨域
        response.getHeaders().set("Access-Control-Allow-Origin", "*");
        return body;
    }
}

此实现方式也是全局跨域，它对整个项目中的所有接口有效。

2.Nginx 中解决跨域

在 Nginx 服务器的配置文件中添加以下代码：

server {
    listen       80;
    server_name  your_domain.com;
    location /api {
        # 允许跨域请求的域名，* 表示允许所有域名访问
        add_header 'Access-Control-Allow-Origin' '*';

        # 允许跨域请求的方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        # 允许跨域请求的自定义 Header
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';

        # 允许跨域请求的 Credential，如果需要传递Cookie就需要开启此项
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 预检请求的存活时间，即 Options 请求的响应缓存时间
        add_header 'Access-Control-Max-Age' 3600;

        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
    # 其他配置...
}

上述示例中，location /api 代表配置针对 /api 路径的请求进行跨域设置。可以根据具体需要修改 location 的值和其他相关参数。配置中的 add_header 指令用于设置响应头部，常用的响应头部包括以下这些：

  • Access-Control-Allow-Origin：用于指定允许跨域的域名，可以设置为 * 表示允许所有域名访问。
  • Access-Control-Allow-Methods：用于指定允许的跨域请求的方法，例如 GET、POST、OPTIONS 等。
  • Access-Control-Allow-Headers：用于指定允许的跨域请求的自定义 Header。
  • Access-Control-Allow-Credentials：用于指定是否允许跨域请求发送和接收 Cookie。
  • Access-Control-Max-Age：用于设置预检请求（OPTIONS 请求）的响应缓存时间。

3.网关中解决跨域

Spring Cloud Gateway 中解决跨域问题可以通过以下两种方式实现：

  1. 通过在配置文件中配置跨域实现。
  2. 通过在框架中添加 CorsWebFilter 来解决跨域问题。

3.1 配置文件中设置跨域

在 application.yml 或 application.properties 中添加以下配置：

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]': # 这里的'/**'表示对所有路由生效，可以根据需要调整为特定路径
            allowedOrigins: "*" # 允许所有的源地址，也可以指定具体的域名
            allowedMethods: # 允许的 HTTP 方法类型
              - GET
              - POST
              - PUT
              - DELETE
              - OPTIONS
            allowedHeaders: "*" # 允许所有的请求头，也可以指定具体的请求头
            allowCredentials: true # 是否允许携带凭证（cookies）
            maxAge: 3600 # CORS预检请求的有效期（秒）

其中：

  • allowedOrigins: 设置允许访问的来源域名列表，"*" 表示允许任何源。
  • allowedMethods: 指定哪些HTTP方法可以被用于跨域请求。
  • allowedHeaders: 客户端发送的请求头列表，"*" 表示允许任何请求头。
  • allowCredentials: 当设为 true 时，允许浏览器在发起跨域请求时携带认证信息（例如 cookies）。
  • maxAge: 预检请求的结果可以在客户端缓存的最大时间。

通过这样的配置，Spring Cloud Gateway 网关将自动处理所有经过它的跨域请求，并添加相应的响应头，从而允许前端应用执行跨域请求。

3.2 添加 CorsWebFilter 来解决跨域问题

在 Spring-Framework 从 5.3 版本之前，使用以下代码可以让 Spring Cloud Gateway 网关允许跨域：

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOrigin("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

而 Spring-Framework 5.3 版本之后，关于 CORS 跨域配置类 CorsConfiguration 中将 addAllowedOrigin 方法名修改为 addAllowedOriginPattern，因此配置了变成了以下这样：

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOriginPattern("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

小结

跨域问题可以在网关层、反向代理层或应用层来解决，而它们的使用优先级是：网关层 > 代理层 > 应用层。因为越靠前覆盖范围就越大，解决跨域问题就越容易。当前，具体使用哪种方案是要根据项目的实际情况来判定的。

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

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

相关文章

行业名称组合商标驳回，要不要做驳回复审！

行业名称组合商标驳回，要不要做驳回复审！

今天一网友问普推知产老杨做驳回复审多少费用&#xff0c;让先发来驳回文件看下&#xff0c;并不是所有商标驳回值得去做驳回复审&#xff0c;因为有的驳回理由去做通过率极低&#xff0c;等于浪费费用和时间。 网友这个申请注册商标名称是英文&#xff0c;翻译过来的是行业常…
阅读更多...
全国大学生数学建模大赛备赛——相关系数的求解（皮尔逊（pearson）、斯皮尔曼（spearman）、肯德尔（kendall）相关系数）

全国大学生数学建模大赛备赛——相关系数的求解（皮尔逊（pearson）、斯皮尔曼（spearman）、肯德尔（kendall）相关系数）

相关系数是用来衡量两个变量之间线性相关程度的指标。它的取值范围在-1到1之间&#xff0c;当相关系数为1时表示两个变量完全正相关&#xff08;即一个变大另一个也变大&#xff09;&#xff0c;当相关系数为-1时表示两个变量完全负相关&#xff08;即一个变大另一个变小&#…
阅读更多...
设计数据库之概念模式：E-R模型

设计数据库之概念模式：E-R模型

Chapter3&#xff1a;设计数据库之概念模式&#xff1a;E-R模型 笔记来源&#xff1a;《漫画数据库》—科学出版社 设计数据库的步骤&#xff1a; 概念模式 概念模式(conceptual schema)是指将现实世界模型化的阶段进而&#xff0c;是确定数据库理论结构的阶段。 概念模式的设…
阅读更多...
PMSM 永磁同步电机滑膜控制 SVPWM矢量控制 matlab simulink 仿真

PMSM 永磁同步电机滑膜控制 SVPWM矢量控制 matlab simulink 仿真

仿真搭建平台&#xff1a; (1)该模型采用matlab/simulink 2016b版本搭建&#xff0c;使用matlab 2016b及以上版本打开最佳; (2)该模型已经提前转换了各个常用版本&#xff08;最低为matlab2012b&#xff09;&#xff0c;防止出现提示版本过高的情况。 模型截图&#xff1a; 算…
阅读更多...
基于springboot+vue的反欺诈平台的建设

基于springboot+vue的反欺诈平台的建设

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
律师如何看待项目管理中的技术风险

律师如何看待项目管理中的技术风险

大家好&#xff0c;我是不会魔法的兔子&#xff0c;是一枚北京的执业律师&#xff0c;创建[项目管理者的法小院儿]&#xff0c;持续从法律的角度分享项目管理中的风险问题及预防&#xff0c;让项目管理者能够提早发现与解决项目执行过程中的风险&#xff0c;同时欢迎大家一起交…
阅读更多...
Vue3 + Django 前后端分离项目实现密码认证登录

Vue3 + Django 前后端分离项目实现密码认证登录

1、功能需求 通常中小型前后端项目&#xff0c;对安全要求不高&#xff0c;也可以采用密码认证方案。如果只用django来实现非常简单。采用 Vue3 前后端分离架构&#xff0c;实现起来稍繁琐一点&#xff0c;好处是可以利用各种前端技术栈&#xff0c;如element-plus UI库来渲染…
阅读更多...
蓝桥杯 2022 省B 李白打酒加强版

蓝桥杯 2022 省B 李白打酒加强版

这题用递归暴力的方法如下&#xff1a; #include<iostream> #include<bits/stdc.h> using namespace std; int num; int N,M; void dfs(int now,int n,int m) {if(now<0 || n>N ||m>M)return ;if(nN && mM){if(now1)num1;return;}dfs(now-1,n,m1…
阅读更多...
DDR4总结最全纯干货分享

DDR4总结最全纯干货分享

DDR存储器发展的主要方向一言以蔽之&#xff0c;是更高速率&#xff0c;更低电压&#xff0c;更密的存储密度&#xff0c;从而实现更好的性能。 DDR4 SDRAM&#xff08;Double Data Rate Fourth SDRAM&#xff09;&#xff1a;DDR4提供比DDR3/ DDR2更低的供电电压1.2V以及更高的…
阅读更多...
如果搭建axb回拨

如果搭建axb回拨

AXB回拨技术是一种先进的电话通讯技术&#xff0c;它通过在A&#xff08;主叫方&#xff09;与B&#xff08;被叫方&#xff09;之间引入一个中间号码X&#xff0c;实现了双方的通话连接。这种技术可以有效避免直接拨打被叫方的电话号码&#xff0c;从而保护了用户的隐私。 具体…
阅读更多...
GPT2从放弃到入门(三)

GPT2从放弃到入门(三)

引言 上篇文章我们看到了如何从零训练一个聊天机器人&#xff0c;本文在此基础上介绍各种生成策略的原理和实现。最后通过Gradio构建一个聊天机器人应用。 定义生成框架 def generate(model,tokenizer,prompt,max_length255,temperature1.0,top_k50,top_p1.0,repetition_pen…
阅读更多...
【WEEK4】 【DAY4】AJAX第一部分【中文版】

【WEEK4】 【DAY4】AJAX第一部分【中文版】

【WEEK4】 【DAY4】AJAX第一部分【中文版】 2024.3.21 Thursday 目录 8.AJAX8.1.简介8.2.伪造ajax8.2.1.新建module&#xff1a;springmvc-06-ajax8.2.2.添加web支持&#xff0c;导入pom依赖8.2.2.1.修改web.xml8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml8.2.4.…
阅读更多...
tftp使用

tftp使用

下载 sudo apt-get install tftpd-hpa 创建文件夹 mkdir /home/ljl/work/tftpd mkdir /home/ljl/tftpd chmod 777 tftpd/编辑 sudo vim /etc/default/tftpd-hpa //服务器端 sudo apt-get install tftp-hpa //客户端编辑权限 sudo vi /etc/default/tftpd-hpa 内容&#xff1…
阅读更多...
智能风扇的新篇章：唯创知音WTK6900G语音识别芯片引领行业革新

智能风扇的新篇章：唯创知音WTK6900G语音识别芯片引领行业革新

随着科技浪潮的推进&#xff0c;智能化技术逐渐渗透到生活的每一个角落&#xff0c;家电领域尤为明显。风扇&#xff0c;这一夏日清凉神器&#xff0c;也通过智能化改造&#xff0c;焕发出前所未有的光彩。其中&#xff0c;智能语音控制功能的加入&#xff0c;为风扇的使用带来…
阅读更多...
算法系列--递归(2)

算法系列--递归(2)

&#x1f495;"什么样的灵魂就要什么样的养料&#xff0c;越悲怆的时候我越想嬉皮。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–递归(2) 前言:今天带来的是算法系列--递归(2)的讲解,包含六个和二叉树相关的题目哦 1.计算布尔⼆叉树的…
阅读更多...
Redis中文乱码问题

Redis中文乱码问题

最近排查问题&#xff0c;发现之前的开发将日志写在redis缓存中&#xff08;不建议这样做&#xff09;&#xff0c;我在查看日志的时候发现没办法阅读&#xff0c;详细是这样的&#xff1a; 查阅资料后发现是进制问题&#xff0c;解决方法是启动客户端的时候将redis-cli改为red…
阅读更多...
【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

RPG Maker MV 仿新仙剑 战斗场景UI 八 状态及装备场景代码效果 状态及装备场景 本计划在战斗场景中直接制作的&#xff0c;但考虑到在战斗场景中加入太多的窗口这不太合适&#xff0c;操作也繁琐&#xff0c;因此直接使用其他场景。 代码 Pal_Window_EquipStatus.prototype.…
阅读更多...
STM32之HAL开发——启动文件详解【精华版】

STM32之HAL开发——启动文件详解【精华版】

启动文件介绍 启动文件是使用机器认识的汇编语言&#xff0c;由汇编编写&#xff0c;是系统上电复位后第一个执行的程序&#xff0c;经过一些必要的配置&#xff0c;最终能够调用 main 函数&#xff0c;使得用户程序能够在 MCU上正常运行起来的必备文件。 无论是是何种MCU&…
阅读更多...
腾讯三面被问到有没有参加过CTF_我反手就是一套军体拳打得面试官哑口无言！

腾讯三面被问到有没有参加过CTF_我反手就是一套军体拳打得面试官哑口无言！

目录 ​ 前言&#xff1a; 正文&#xff1a; 什么是CTF&#xff1f; 什么是PWN? 为什么要学CTF&#xff1f; CTF竞赛模式&#xff1a; CTF各大题型简介&#xff1a; 学之前的思考&#xff1a;分析赛题情况 常规做法 CTF比赛需要的知识储备 CTF比赛的神器&#xff…
阅读更多...
基于甘特图的资源调度优化策略

基于甘特图的资源调度优化策略

资源在项目管理中是一个永恒的话题。无论人力、物力还是财力资源,总是捉襟见肘,都希望用最少的资源完成最大的工作。这就要求我们在资源调度方面果断精准,做到最优化。而甘特图作为项目时间规划的重要工具,恰恰能为资源调度提供绝佳帮助。 甘特图能反映出任务之间的制约关系,有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023