2024年1月Java项目开发指南12：前后端分离项目跨域问题解决

创建config文件夹，创建WebConfig文件

代码如下(可以直接抄)

package cc.xrilang.serversystem.config;

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 WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173") // 允许的前端域名
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true) // 是否允许发送Cookie
                .maxAge(3600); // 预检请求的缓存时间(秒)

    }
}

// 允许的前端域名 记得改成你自己的前端域名！！！记得改！！！

在创建了上述的 WebConfig 类并实现了 WebMvcConfigurer 接口以添加 CORS 配置之后，您的 Spring Boot 应用程序就已经配置好了跨域支持。当您的前端应用程序尝试从不同的域向后端发送请求时，这些 CORS 设置将确保请求不会被浏览器阻止。

1. 创建配置类：您创建了一个名为 WebConfig 的类，并用 @Configuration 注解标记它，这表明这个类将包含 Spring Boot 应用程序的一些配置信息。

2. 实现 WebMvcConfigurer 接口：通过实现 WebMvcConfigurer 接口，您可以自定义 Spring MVC 的配置。在这个例子中，您重写了 addCorsMappings 方法来添加 CORS 配置。

3. 配置 CORS：在 addCorsMappings 方法中，您使用 CorsRegistry 来定义哪些路径应该允许跨域请求，以及这些请求应该满足哪些条件(例如允许的域、HTTP 方法、请求头等)。

现在，当您运行您的 Spring Boot 应用程序时，它将自动应用这些 CORS 设置。任何符合您指定条件的跨域请求都将被允许，而不符合条件的请求将被拒绝。

请确保：

• 将 "http://your-frontend-domain.com" 替换为您实际的前端应用程序域名。如果您在开发过程中使用本地主机，则可以将其设置为 "http://localhost:your-frontend-port"。
• 如果您的前端应用程序需要发送凭据(例如 Cookies)，请确保 .allowCredentials(true) 被正确设置。
• 检查您的前端应用程序是否设置了正确的请求头，以便与后端服务器的 CORS 配置相匹配。

如果您的应用程序在添加了这些配置之后仍然遇到跨域问题，请检查您的前端代码以确保它遵循了您设置的 CORS 策略，并检查您的网络浏览器控制台以获取任何可能的错误信息。