前后端分离项目遇到的跨域问题解决方案（后端为主）

news/2024/9/16 19:37:07/ 标签: spring boot

文章目录

什么是跨域问题？
- 第一种方式 ⇒ 注解解决方案：
- 第二种方式 ⇒ 使用 CorsFilter 方法解决：
- 第三种方式 ⇒ 实现 WebMvcConfigure 接口，添加映射（个人推荐）

什么是跨域问题？

先说问题：

在前后端接口设置正常的情况下，却不能正常使前后端进行通讯。这是为什么？就产生了以下问题：跨域。

跨域（Cross-Origin Resource Sharing，简称 CORS）是一种安全策略，用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略（Same-Origin Policy）的一部分，旨在防止恶意网站通过一个域的网页访问另一个域的敏感数据。

由于浏览器实施的同源策略（Same Origin Policy），这是一种基本的安全协议，它确保了浏览器的稳定运行。没有同源策略，浏览器的许多功能可能无法正常工作。整个Web体系建立在同源策略之上，浏览器是这一策略的具体实现。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。所谓同源，指的是两个页面必须具有相同的协议（protocol）、域名（host）和端口号（port）

第一种方式 ⇒ 注解解决方案：

我们需要在方法前面，加上注解 @CorsFilter 注解，即可解决。(注意！注意！是方法，而不是类上面哦！！！！)

第二种方式 ⇒ 使用 CorsFilter 方法解决：

代码如下：

在这里插入图片描述

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter(){CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");corsConfiguration.addAllowedOrigin("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",corsConfiguration);return new org.springframework.web.filter.CorsFilter(source);}}

第三种方式 ⇒ 实现 WebMvcConfigure 接口，添加映射（个人推荐）

在这里插入图片描述

代码如下：

package com.xiao.Config;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 CorsConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("*").allowedHeaders("*").allowCredentials(true) // 允许保存到 cookie.maxAge(3600);          // cookie 保存的时间 xx 秒}
}