CORS Angular 和 SpringBoot - 请求被阻止

服务器

跨源资源共享（CORS）是一种机制，用于在浏览器和服务器之间进行跨源通信。在使用Angular和Spring Boot进行开发时，我们有时会遇到请求被阻止的问题。这篇文章将介绍CORS的概念，并提供解决这个问题的方法和示例代码。

CORS是什么？

CORS是一种浏览器机制，用于控制在不同源（域名、协议或端口）之间进行的跨域请求。当使用Angular作为前端框架，Spring Boot作为后端框架时，如果前端代码和后端代码运行在不同的域名或端口上，浏览器会阻止跨域请求，以防止潜在的安全风险。

为什么会出现请求被阻止的问题？

当浏览器发起一个跨域请求时，它会向服务器发送一个预检请求（OPTIONS请求），以确定是否允许该请求。服务器需要正确配置响应头，以允许跨域请求。如果服务器没有正确配置响应头，浏览器会阻止请求，并抛出CORS错误。

如何解决请求被阻止的问题？

为了解决请求被阻止的问题，我们需要在Spring Boot后端应用程序中配置响应头。具体而言，我们需要添加一些额外的配置，以允许跨域请求。

首先，我们需要在后端的控制器方法上添加@CrossOrigin注解。这个注解告诉Spring Boot允许跨域请求，并指定允许的源（域名）列表。

以下是一个示例代码，展示如何在Spring Boot中配置跨域请求：

Java
@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class UserController {
    // 控制器方法代码...
}

在这个示例中，我们允许来自"http://localhost:4200"域名的跨域请求。

处理复杂请求

有时候，我们的请求可能是复杂请求，例如带有自定义头部信息或使用了PUT、DELETE等非简单请求方法。对于这种情况，我们需要在服务器端添加更多的配置。

在Spring Boot中，我们可以使用WebMvcConfigurer接口来配置CORS。以下是一个示例代码：

Java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:4200")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .allowCredentials(true);
    }
}

在这个示例中，我们允许所有路径的请求来自"http://localhost:4200"域名，并且允许使用GET、POST、PUT和DELETE方法。我们还指定了允许的自定义头部信息，并设置了允许携带凭证（例如cookie）。

CORS是一种用于在浏览器和服务器之间进行跨源通信的机制。在使用Angular和Spring Boot进行开发时，我们可能会遇到请求被阻止的问题。为了解决这个问题，我们需要在Spring Boot后端应用程序中配置响应头，允许跨域请求。通过添加@CrossOrigin注解或使用WebMvcConfigurer接口，我们可以轻松地配置CORS。

希望这篇文章能帮助你解决CORS问题，并顺利进行跨域通信。祝你开发愉快！