2024年1月Java项目开发指南12：前后端分离项目跨域问题解决
1.2024年1月Java项目开发指南1：环境与工具准备2.2024年1月Java项目开发指南2：项目设计3.2024年1月Java项目开发指南3：创建Springboot项目4.2024年1月Java项目开发指南4：IDEA里配置MYSQL5.2024年1月Java项目开发指南5：controller、service、mapper6.2024年1月Java项目开发指南6：接口测试7.2024年1月Java项目开发指南7：增删改查与接口测试8.2024年1月Java项目开发指南8：统一数据返回格式9.2024年1月Java项目开发指南9：密码加密存储10.2024年1月Java项目开发指南10：vite+Vue3项目创建11.2024年1月Java项目开发指南11：axios请求与接口统一管理
12.2024年1月Java项目开发指南12：前后端分离项目跨域问题解决
13.2024年1月Java项目开发指南13：登录注册实现14.2024年1月Java项目开发指南14：关于post中的body和param以及java中的@RequestBody和@RequestParam15.2024年1月Java项目开发指南15：vue3+AntDesignVue 设计页面16.2024年1月Java项目开发指南16：用户自由选择字段查询、是否模糊查询17.2024年1月Java项目开发指南17：自动接口文档配置18.2024年1月Java项目开发指南19：Vue动态页面渲染19.2024年1月Java项目开发指南18：自定义异常输出创建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 设置将确保请求不会被浏览器阻止。
-
创建配置类：您创建了一个名为
WebConfig的类，并用@Configuration注解标记它，这表明这个类将包含 Spring Boot 应用程序的一些配置信息。 -
实现 WebMvcConfigurer 接口：通过实现
WebMvcConfigurer接口，您可以自定义 Spring MVC 的配置。在这个例子中，您重写了addCorsMappings方法来添加 CORS 配置。 -
配置 CORS：在
addCorsMappings方法中，您使用CorsRegistry来定义哪些路径应该允许跨域请求，以及这些请求应该满足哪些条件（例如允许的域、HTTP 方法、请求头等）。
现在，当您运行您的 Spring Boot 应用程序时，它将自动应用这些 CORS 设置。任何符合您指定条件的跨域请求都将被允许，而不符合条件的请求将被拒绝。
请确保：
- 将
"http://your-frontend-domain.com"替换为您实际的前端应用程序域名。如果您在开发过程中使用本地主机，则可以将其设置为"http://localhost:your-frontend-port"。 - 如果您的前端应用程序需要发送凭据（例如 Cookies），请确保
.allowCredentials(true)被正确设置。 - 检查您的前端应用程序是否设置了正确的请求头，以便与后端服务器的 CORS 配置相匹配。
如果您的应用程序在添加了这些配置之后仍然遇到跨域问题，请检查您的前端代码以确保它遵循了您设置的 CORS 策略，并检查您的网络浏览器控制台以获取任何可能的错误信息。
版 权 声 明
作者：萌狼蓝天
QQ：3447902411（仅限技术交流，添加请说明方向)
转载请注明原文链接：https://www.cnblogs.com/zwj/p/17988395/project202401-12
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步