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 策略,并检查您的网络浏览器控制台以获取任何可能的错误信息。

posted @ 2024-01-25 23:10  萌狼蓝天  阅读(15)  评论(0编辑  收藏  举报