SpringBoot前后端分离解决跨域问题的3种解决方案总结_Java教程

SpringBoot前后端分离解决跨域问题的3种解决方案总结

2022-12-06 15:19扎哇太枣糕 Java教程

前后端分离大势所趋,跨域问题更是老生常谈,下面这篇文章主要给大家介绍了SpringBoot前后端分离解决跨域问题的3种解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

什么是跨域

想要知道什么是跨域的话，我们可以通过一个小案例简单了解一下跨域的概念：在项目代码编写的时候，我们将前端项目代码和后端的项目代码相分离开，一个运行在本地的8080端口一个运行在本地的8888端口，这也就是我们常说的前后端分离项目。现在使用前端的请求去调用后端的接口，就会产生以下的错误

Access to XMLHttpRequest at 'http://localhost:8888/请求名'
from origin ‘http://localhost:8080’ has been blocked by
CORS policy: No ‘Access-Control-Allow-Origin’
header is present on the request resource.

错误原因：基于浏览器的保护机制，当请求中缺少了一些http头信息时，读取响应的操作就会被阻止。出现这个问题并不是说后端没有接收到前端发送过来的请求，相反后端接收请求并且将响应信息返回给了前端，但是返回的响应信息被前端浏览器所拦截了。

这个保护机制就是浏览器的一种重要的安全策略——同源策略，该策略可以限制不同源之间的交互行为，从而有效避免一些浏览器层面的攻击。所谓的同源就是指url中的协议、域名、端口三个都相同。反观案例的url前端http://localhost:8080请求http://localhost:8888/请求名，协议和域名都相等但是端口却不一样导致两个是不同源，不同源的话就会产生跨域问题。

跨域问题的解决策略

CROS(Cross Origin Resource Sharing)策略，全称为跨域资源共享策略，是后端用来解决跨域问题的一个方案(当然前端也有解决跨域问题的对应方案)，抛开底层具体的解决原理不说，今天就学习一下如何借助该策略实现跨域问题的解决。

三种解决方法

第一种也是最简单但不常用的一种，只需要在后端接口方法上添加 @CrossOrigin 注解，即可解决对这个接口方法的请求跨域问题，但是在实际开发中一般都会有很多的方法，在每一个方法上都添加这个注解的话明显就会很影响使用感受。当然还可以将注解添加到类上，表示类中的所有方法都解决了跨域问题，但是类也不止一个还是麻烦。

				?

									@CrossOrigin

									@GetMapping("/请求名")

									public String sayHello() {

									    return "hello world !";

									}

第二种就是使用过滤器统一处理

				?

									// 对比着看，包千万别导错了

									import org.springframework.context.annotation.Bean;

									import org.springframework.web.cors.CorsConfiguration;

									import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

									import org.springframework.web.filter.CorsFilter;

									@Configuration

									public class CorsConfig {

									    @Bean

									    public CorsFilter corsFilter() {

									        CorsConfiguration corsConfiguration = new CorsConfiguration();

									        // 使用通配符* 允许所有的域请求

									        corsConfiguration.addAllowedOrigin("*");

									        // 使用通配符* 允许所有请求头字段

									        corsConfiguration.addAllowedHeader("*");

									        // 使用通配符* 允许所有请求头方法类型

									        corsConfiguration.addAllowedMethod("*");

									        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

									        // 处理请求映射

									        source.registerCorsConfiguration("/**", corsConfiguration);

									        return new CorsFilter(source);

									    }

									}

第三种就是使用WebMvc的配置类

				?

									// 对比着看，包千万别导错了

									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 WebMvcConfig implements WebMvcConfigurer {

									    @Override

									    public void addCorsMappings(CorsRegistry registry) {

									        registry.addMapping("/**")      // 设置映射

									                .allowedOriginPatterns("*")        // 设置域

									                .allowedMethods("*")               // 设置请求的方式GET、POST等

									                .allowCredentials(true)            // 设置是否携带cookie

									                .maxAge(3600)                      // 设置设置的有效期 秒单位

									                .allowedHeaders("*");              // 设置头

									    }

									}