【项目实战】如何给项目设置允许跨域请求

一、为什么要设置跨域请求

在前后端分离的架构中，设置跨域请求是为了解决浏览器的同源策略（Same-Origin Policy）所带来的限制。同源策略是一种安全机制，它要求浏览器只能在相同的协议、主机和端口下进行通信。换句话说，如果前端代码运行在一个域名下，那么它只能与同一域名下的后端进行通信。

然而，在实际开发中，前端和后端往往运行在不同的域名下，例如前端代码运行在www.example.com，而后端API运行在api.example.com。这就导致了浏览器无法直接发起跨域请求，即使两个域名属于同一个应用程序。

为了解决这个问题，我们需要设置跨域请求。通过在后端API的响应中添加一些特定的头部信息，例如Access-Control-Allow-Origin，我们可以告诉浏览器该后端API允许来自其他域的请求。这样，浏览器就会放宽同源策略的限制，允许前端代码与其他域名下的后端进行通信。

设置跨域请求的目的是为了实现以下几个方面的需求：

1. 跨域数据交互：允许前端代码从不同域名的后端获取数据，实现数据的交互和共享。

2. 跨域资源共享（CORS）：通过CORS机制，允许服务器在响应中设置特定的头部信息，告诉浏览器该服务器允许来自其他域的请求。这样，浏览器就可以安全地处理跨域请求，并将响应返回给前端。

3. 微服务架构：在微服务架构中，不同的服务可能运行在不同的域名下。设置跨域请求使得各个微服务能够相互调用，实现服务之间的协作和数据交换。

总而言之，设置跨域请求是为了克服浏览器同源策略的限制，实现前后端的数据交互和协作。通过设置特定的头部信息，我们可以告诉浏览器允许跨域请求，从而创建灵活、可扩展的应用程序。

二、Spring Boot项目中设置跨域请求

在Spring Boot项目中，你可以通过配置CorsFilter类或使用@CrossOrigin注解来设置跨域请求。

方法一：使用CorsFilter配置跨域请求

1. 创建一个名为CorsConfig的配置类，并添加@Configuration注解。

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*"); // 允许所有域名进行跨域请求
        config.addAllowedMethod("*"); // 允许所有HTTP方法进行跨域请求
        config.addAllowedHeader("*"); // 允许所有请求头进行跨域请求
        source.registerCorsConfiguration("/**", config); // 对所有路径进行跨域配置
        return new CorsFilter(source);
    }
}

2. 在CorsConfig中，我们使用CorsConfiguration对象来配置允许的域名、HTTP方法和请求头。在上面的示例中，我们使用addAllowedOrigin("*")来允许所有域名进行跨域请求。

3. 使用UrlBasedCorsConfigurationSource将配置应用于所有路径，使用CorsFilter将配置添加到过滤器链中。

---

我们还可以使用其他的方式来配置跨域请求，但实现的功能是相同的。

/**
 * 跨域请求配置类
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    /**
     * 添加跨域映射配置
     * @param registry 跨域注册器
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有路径进行跨域配置
                .allowedOriginPatterns("*") // 允许所有域名进行跨域请求
                .allowCredentials(true) // 允许发送身份凭证的请求
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH") // 允许的HTTP方法
                .maxAge(3600); // 预检请求的缓存时间，单位为秒
    }

}

WebMvcConfigurer接口是Spring提供的用于配置Web MVC的接口，通过实现该接口，我们可以自定义一些Web MVC的配置。

CorsConfig类实现了WebMvcConfigurer接口，并重写了其中的addCorsMappings方法。

在addCorsMappings方法中，我们可以配置跨域请求的细节。

• registry.addMapping("/**")表示对所有路径进行跨域配置。
• allowedOriginPatterns("*")表示允许所有域名进行跨域请求。
• allowCredentials(true)表示允许发送身份凭证（如Cookie、HTTP认证等）的请求。
• allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")表示允许的HTTP方法。
• maxAge(3600)表示预检请求的缓存时间，单位为秒。

通过以上配置，我们实现了允许所有域名的跨域请求，并且允许发送身份凭证的请求，同时指定了允许的HTTP方法和预检请求的缓存时间。

这个配置类可以被应用于Spring Boot项目中，用于解决跨域请求的问题。当前端代码通过浏览器向后端API发起跨域请求时，这个配置类会生效，允许请求的跨域访问。

方法二：使用@CrossOrigin注解配置跨域请求

1. 在控制器类或控制器方法上添加@CrossOrigin注解。

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST}) // 允许所有域名的GET和POST请求
public class MyController {

    // 控制器方法
}

2. 在@CrossOrigin注解中，我们可以指定允许的域名、允许的HTTP方法等。在上面的示例中，我们使用origins = "*"来允许所有域名进行跨域请求，并且只允许GET和POST请求。

无论使用哪种方法，设置跨域请求后，前端代码就可以从其他域名下的后端API获取数据或执行操作。