SpringBoot 3 和 Angular 中的 CORS 问题：彻底解析

2024-03-05 10:48:30

理解CORS问题及其影响

跨源资源共享（Cross-Origin Resource Sharing, CORS）是一组HTTP头字段机制，它允许在具有不同源的Web应用程序之间进行通信。这种限制主要来自浏览器的安全策略，称为同源安全策略。当一个网页尝试从不同的域请求资源时，这个请求将被阻止，除非服务器通过适当的CORS头字段明确地允许这样的请求。

问题表现与原因

在集成SpringBoot和Angular应用时，最常见的问题是跨域资源共享错误（通常表现为No 'Access-Control-Allow-Origin' header is present on the requested resource.）。此问题主要由于后端服务默认不设置必要的CORS响应头而导致前端无法成功从其他源读取数据。

解决方案与步骤

在SpringBoot中配置CORS

要解决这个问题，需在SpringBoot 3应用中显式配置CORS。可以通过两种方式实现：全局配置和单个控制器方法上的配置。

1. 全局配置

创建或编辑WebSecurityConfigurerAdapter的子类，并重写其configure(HttpSecurity)方法：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 应用于所有路径
            .allowedOrigins("*")   // 允许所有源访问
            .allowCredentials(true) // 支持cookies跨域
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);          // 预检请求缓存时间为1小时
    }
}

2. 单个控制器配置

在需要进行CORS处理的Controller上添加注解：

@RestController
@RequestMapping("/api/v1")
@CrossOrigin(origins = "http://your-angular-app.com", allowCredentials = "true")
public class ExampleController {
    // controller methods...
}

在Angular中处理请求

虽然大部分配置是在后端完成的，但确保前端正确发送跨域请求也很重要。例如，在使用HttpClientModule时，可以通过设置请求头来支持携带cookies的请求：

import { HttpClient } from '@angular/common/http';
// ...

constructor(private http: HttpClient) {
    const url = 'http://your-springboot-backend.com/api/v1/resource';

    this.http.get(url, { withCredentials: true }).subscribe(data => {
        console.log('Data received:', data);
    });
}