SpringBoot前端初学者系列（四）：跨域的复习

2023-12-26 20:49:28

今天，我多年的后端合作伙伴过来和我讨论跨域问题。他很想知道：在线环境中，由于NGINX帮助前端处理跨域问题，配置了Access-Control-Allow-Origin和Access-Control-Allow-Credentials，那么在本地调试时，我是如何处理的呢？

对于这个问题，我想向你们展示一个我发现的非常有趣的解决方案。虽然这似乎是一个比较老生常谈的话题，但我相信对于刚开始接触SpringBoot前端开发的新手来说，仍然很有价值。

在介绍这个解决方案之前，我们先来回顾一下跨域的本质。跨域是指从一个源（例如，前端应用程序）向另一个源（例如，后端API）发送请求的情况。当这些源不匹配时，就会出现跨域问题。

默认情况下，浏览器会阻止跨域请求以保护用户安全。但是，在某些情况下，我们需要允许跨域请求，例如，当前端应用程序需要与后端API交互时。

在SpringBoot中，我们可以通过在控制器方法上添加@CrossOrigin注解来允许跨域请求。这个注解可以配置各种选项，例如允许的源、请求方法和标头。

@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/api/data")
public ResponseEntity<List<Data>> getData() {
    // ...
}

这将允许来自http://localhost:3000的跨域请求访问/api/data端点。

现在，让我们回到本地调试期间如何处理跨域的问题。正如我提到的，后端合作伙伴使用NGINX在在线环境中处理跨域。但在本地调试时，我们没有NGINX。

一个解决方案是使用浏览器扩展程序，例如CORS Everywhere。此扩展程序会在浏览器中注入一个中间层，自动添加所需的Access-Control-Allow-Origin和Access-Control-Allow-Credentials标头。

另一种解决方案是使用SpringBoot中的WebMvcConfigurer接口。我们可以实现这个接口并重写addCorsMappings方法来配置全局跨域处理。

@Configuration
public class WebConfig implements WebMvcConfigurer {

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