解决CORS错误（Spring Boot）

记录一下错误，以博客的形式

前言

跨域（Cross-Origin）是指在Web开发中，当一个Web应用试图从一个源（域名、协议、端口组合）获取资源时，该请求的目标与当前页面的源不同。具体来说，当一个页面的JavaScript代码尝试向不同域名、协议或端口的服务器发送请求时，就会发生跨域请求。

跨域请求是由浏览器实施的同源策略（Same-Origin Policy）限制导致的。同源策略是浏览器的一项安全机制，旨在保护用户的隐私和安全。同源策略要求Web页面只能从相同源加载资源，不同源的页面不能访问彼此的数据，以防止恶意网站获取用户的敏感信息。

跨域请求通常发生在以下情况下：

1. 不同域名之间的请求： 例如，前端应用部署在http://example.com，而后端API服务部署在http://api.example.com。
2. 不同子域之间的请求： 例如，前端应用部署在http://www.example.com，而后端API服务部署在http://api.example.com。
3. 不同协议之间的请求： 例如，前端应用部署在https://example.com，而后端API服务部署在http://api.example.com。

什么是CORS错误？

CORS是浏览器实现的一种安全机制，用于控制在客户端脚本中发起的跨源HTTP请求。当浏览器发现一个跨域请求时，它会检查请求目标的响应中是否包含特定的CORS头部。如果缺少这些头部或者头部中的信息不符合要求，浏览器就会拒绝该请求，并报告CORS错误。

为什么会出现CORS错误？

CORS错误通常由以下原因导致：

1. 缺少或不正确的CORS响应头部： 服务器未正确配置CORS响应头部，导致浏览器拒绝跨域请求。
2. 浏览器同源策略： 浏览器的同源策略限制了在不同源（域名、协议、端口）之间的数据交换，跨域请求需要特殊的权限设置。

如何解决CORS错误？

要解决CORS错误，需要在服务器端进行配置。以下是常见的解决方法：

1. 在服务器端设置正确的CORS响应头部：
   • 允许特定域名访问资源：设置Access-Control-Allow-Origin头部。
   • 允许特定HTTP方法：设置Access-Control-Allow-Methods头部。
   • 允许特定HTTP头部：设置Access-Control-Allow-Headers头部。
   • 允许发送Cookie：设置Access-Control-Allow-Credentials头部。
   • 允许客户端访问自定义响应头部：设置Access-Control-Expose-Headers头部。
2. 使用Spring Boot等后端框架提供的CORS配置功能：
   • 在Spring Boot中，可以通过添加配置类或者拦截器来实现CORS配置，具体方法请参考官方文档或者相关教程。

Spring Boot提供了方便的CORS配置功能，通过添加配置类或者拦截器来实现CORS配置，以允许跨域请求。

---

首先，创建一个名为CorsConfig的Java类，用于配置CORS。这个类需要实现WebMvcConfigurer接口，并重写addCorsMappings方法。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost") // 允许来自http://localhost的请求.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的HTTP方法.allowedHeaders("*"); // 允许的HTTP头部}
}

复制这段代码即可解决问题

在这个配置类中，通过allowedOrigins方法指定允许访问资源的域名，可以是单个域名、多个域名，或者使用通配符*表示允许任意域名访问。通过allowedMethods方法指定允许的HTTP方法，以及通过allowedHeaders方法指定允许的HTTP头部。你可以根据自己的需求进行修改。

这样配置完成后，当前端应用通过http://localhost访问后端服务时，就不会再出现CORS错误了。后端服务会正确地响应跨域请求，提供资源访问权限。

请确保这个CorsConfig类能够被Spring Boot扫描到，通常放置在与启动类（如Application类）相同的包或其子包下。这样Spring Boot启动时就会加载这个配置类，并应用其中的CORS配置。