端口不一致状态码403？SpringBoot轻松解决前后端分离跨域问题

2023-01-03 01:09:30

跨域问题：前后端分离项目中的常见烦恼

在前后端分离项目中，跨域问题可谓是开发人员们经常遇到的拦路虎，它会阻碍前端应用程序从不同域的后端服务器获取资源，导致恼人的状态码 403 拒绝访问异常。

跨域问题的根源

要理解跨域问题，我们首先需要了解浏览器的同源策略。该策略旨在保护用户免受恶意攻击，它限制了不同域名的 Web 应用程序之间的通信。在前后端分离项目中，前端和后端通常部署在不同的域名或端口上，这会导致跨域问题的发生。当前端试图从后端获取资源时，浏览器会阻止该请求，返回状态码 403 拒绝访问的异常。

使用 SpringBoot 轻松解决跨域问题

SpringBoot 提供了两种简单而有效的解决方案来解决跨域问题：@CrossOrigin 注解和 CorsFilter 过滤器。

1. 使用 @CrossOrigin 注解

@CrossOrigin 注解是 SpringBoot 提供的一种简便方法来处理跨域问题。它可以应用于控制器或方法上，允许跨域访问。

使用 @CrossOrigin 注解非常简单，只需在控制器或方法上添加该注解，并指定允许跨域的域名、端口、方法等信息即可。例如，以下代码演示了如何使用 @CrossOrigin 注解来允许所有域名的跨域访问：

@CrossOrigin
@RestController
public class MyController {

    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello, World!");
    }

}

2. 使用 CorsFilter 过滤器

CorsFilter 过滤器是 SpringBoot 提供的一种更灵活的解决方案，它允许配置更详细的跨域设置，例如允许的域列表、允许的 HTTP 方法、允许的请求头等。

要使用 CorsFilter 过滤器，需要在 SpringBoot 应用程序中注册该过滤器。可以在 WebSecurityConfigurerAdapter 类中添加以下代码来注册 CorsFilter 过滤器：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*");
}