React对接Spring Boot发PUT请求遇CORS缺失Access-Control-Allow-Origin报错

核心报错特征 #

• React本地开发服务运行在3000端口，通过axios向8080端口的Spring Boot后端/products接口发起PUT请求时，被浏览器同源策略拦截
• 控制台明确报错：响应缺失Access-Control-Allow-Origin响应头，跨域请求执行失败，禁止读取远程资源

已验证无效的操作尝试 #

• 在服务端控制器接口添加针对3000端口的@CrossOrigin注解
• 前端自定义请求头适配跨域场景
• React开发服务器配置请求代理
• 浏览器安装跨域模拟插件

报错核心诱因 #

PUT请求属于浏览器定义的非简单请求，正式请求发送前会自动触发OPTIONS类型的预检请求，单接口级别的@CrossOrigin注解不会处理链路前置的预检请求，如果项目中的Spring Security、自定义拦截器、过滤器提前拦截了OPTIONS请求，会直接返回不携带跨域响应头的错误响应，最终触发浏览器拦截
常见配置错位场景包括：

• 全局CORS配置优先级低于业务拦截器、安全过滤器，局部注解配置无法覆盖前置拦截链路
• 开发代理的路径匹配规则和实际请求路径不匹配，导致请求绕过代理直接命中后端8080端口，触发真实跨域

落地修复步骤 #

• 替换单接口@CrossOrigin的零散配置，注册高优先级全局CORS过滤器，显式允许3000端口来源的请求，放行PUT请求方法、自定义请求头、凭证携带场景
• 配置链路规则：完全放行OPTIONS类型的预检请求，返回200状态码，不进入鉴权、参数校验等业务逻辑流程
• 校验axios请求配置：若使用开发代理模式，将请求baseURL改为相对路径，避免硬编码http://localhost:8080导致请求绕过代理直接跨域访问
• 排障验证：打开开发者工具网络面板，单独定位OPTIONS预检请求的响应内容，确认是否存在跨域响应头，无浏览器插件干扰的环境下重复验证请求流程

内容的提问来源于stack exchange，提问作者Keith Nolan