尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

如何快速解决jeecg-boot跨域问题:CORS配置完整指南

如何快速解决jeecg-boot跨域问题:CORS配置完整指南 如何快速解决jeecg-boot跨域问题CORS配置完整指南【免费下载链接】jeecg-boot【低代码v2.0一句话即可生成整个系统】企业级AI低代码平台一键生成前后端代码甚至整个系统。 AI Skills 一句话画流程、设计表单、生成报表、大屏。内置 AI应用平台涵盖AI聊天、知识库、流程编排、MCP插件等兼容主流大模型。引领AI低代码「Skills 生成 → 在线配置 → 代码生成 → 手工合并-AI修改」开发模式解决 Java 项目 90% 重复工作提高效率又不失灵活。项目地址: https://gitcode.com/GitHub_Trending/je/jeecg-boot故障现场控制台先报什么错浏览器打开 jeecgboot-vue3 页面点登录控制台弹出这样一行红字Access to XMLHttpRequest at http://localhost:8080/jeecg-boot/sys/login from origin http://localhost:3100 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present.这就是典型的 CORS 跨域拦截浏览器同源策略拦截阻止前端调用不同源的后端接口。jeecg-boot 的单体版和微服务版对 CORS 的处理位置完全不同配错地方改了也白改。读完本文你能改对单体和网关两种部署的 CORS 配置。机制一图流请求经过了哪几个节点看上图一次带跨域的登录请求只经过三个节点浏览器先向接口源发一个 OPTIONS 预检请求真正业务请求前走的安检后端 CORS 配置点检查 Origin 是否放行并回写Access-Control-Allow-Origin响应头预检通过浏览器才发出真正的 POST响应头随结果一起带回前端关键源码在哪单体版核心WebMvcConfiguration.java由 CorsFilterCondition.java 控制是否加载微服务版核心jeecg-cloud-gateway/src/main/resources/application.yml最小可用配置单体版 CorsFilter单体部署跑通跨域只需要保证WebMvcConfiguration里这个 Bean 生效jeecg-boot 默认就是这段文件jeecg-boot/jeecg-boot-base-core/src/main/java/org/jeecg/config/WebMvcConfiguration.javaBean Conditional(CorsFilterCondition.class) public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); final CorsConfiguration cfg new CorsConfiguration(); cfg.setAllowCredentials(true); cfg.addAllowedOriginPattern(*); cfg.addAllowedHeader(*); cfg.addAllowedMethod(*); source.registerCorsConfiguration(/**, cfg); return new CorsFilter(source); }参数速查表参数作用生产推荐值setAllowCredentials是否允许请求携带 Cookie 等凭证需要登录态就trueaddAllowedOriginPattern允许访问的前端来源具体域名不写*addAllowedHeader放行的请求头最小集合或*addAllowedMethod放行的 HTTP 方法GET、POST 按需加分场景落地本地联调前端 Vite 代理跨域直接消失本地开发时前端跑 3100 端口、后端跑 8080同机不同端口属于跨域。最简单的做法是用 Vite 开发代理把接口转发到后端同源后根本不走 CORS。修改.env.development中的VITE_PROXYVITE_PROXY[[/jeecg-boot,http://localhost:8080/jeecg-boot]]验证pnpm dev后看 Network 面板请求路径带/jeecg-boot前缀且无 CORS 报错即成功。生产环境限制源域名白名单替代通配符上线后*意味着任何站点都能携带凭证调你的接口必须收紧。注意带凭证时*不合法要写具体域名cfg.addAllowedOriginPattern(https://your-frontend.com); cfg.addAllowedOriginPattern(https://admin.your-domain.com); cfg.addAllowedMethod(HttpMethod.GET); cfg.addAllowedMethod(HttpMethod.POST); cfg.setMaxAge(3600L); // 预检结果缓存1小时验证curl -H Origin: https://evil.com -I https://api.your-domain.com/jeecg-boot/sys/user/list响应头不应出现Access-Control-Allow-Origin。微服务版CORS 只在网关配一次这是最容易踩空的场景。CorsFilterCondition的逻辑是检测到spring.cloud.nacos.discovery.server-addr存在即微服务模式后端的CorsFilterBean 直接不加载跨域统一交给 Gateway 的globalcors处理文件jeecg-boot/jeecg-server-cloud/jeecg-cloud-gateway/src/main/resources/application.ymlspring: cloud: gateway: server: webflux: globalcors: cors-configurations: [/**]: allow-credentials: true allowed-origin-patterns: [https://your-frontend.com] allowed-methods: [GET, POST] allowed-headers: [*]验证curl -H Origin: https://your-frontend.com -I http://网关地址:9999/jeecg-boot/sys/dict/getDictItems/sex响应头含Access-Control-Allow-Origin即生效。踩坑速查这些坑你大概率会踩现象改了单体WebMvcConfiguration却不生效 →根因当前是微服务模式CorsFilterCondition已跳过后端 Bean网关才管 CORS →修复去 Gateway 的globalcors里改现象带 Cookie 的请求被浏览器拦截日志提示凭证冲突 →根因allowCredentialstrue时 origin 是*二者互斥 →修复addAllowedOriginPattern改具体域名现象业务接口通了OPTIONS 预检 403 →根因预检请求先被认证拦截器挡掉没走到业务层 →修复确认 OPTIONS 不被登录鉴权拦截maxAge设3600L减少预检次数现象同时配了CorsFilter和addCorsMappings响应头重复 →根因两套 CORS 机制叠加冲突 →修复保留CorsFilter删掉addCorsMappings注册行动清单确认部署形态有 Nacos discovery 配置就去改网关globalcors没有才改后端CorsFilter把allowed-origin-patterns的*换成前端真实域名白名单并保留allow-credentials: true生产环境给预检加maxAge常用 3600 秒用带Origin头的 curl 命令逐环境验证响应头而不是只信页面能打开官方文档README.md【免费下载链接】jeecg-boot【低代码v2.0一句话即可生成整个系统】企业级AI低代码平台一键生成前后端代码甚至整个系统。 AI Skills 一句话画流程、设计表单、生成报表、大屏。内置 AI应用平台涵盖AI聊天、知识库、流程编排、MCP插件等兼容主流大模型。引领AI低代码「Skills 生成 → 在线配置 → 代码生成 → 手工合并-AI修改」开发模式解决 Java 项目 90% 重复工作提高效率又不失灵活。项目地址: https://gitcode.com/GitHub_Trending/je/jeecg-boot创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表