CORS

这一课你将能做到

1. 用「协议 + 域名 + 端口」三要素定义源（Origin），并快速判断任意两串 URL 是否跨源
2. 区分简单请求与预检 OPTIONS，列出至少三种会触发预检的特征，并读懂 Access-Control-Allow-* 四个响应头
3. 遇到 Console 里的 CORS 报错时，到 Network 定位失败的 OPTIONS/主请求，判断该改 Spring 哪处配置，还是该改成同域反代

为什么要学

本地前端 localhost:3000 调后端 localhost:8080，或者前后端挂在不同子域，浏览器会直接拦截「读跨源响应」——Console 一串红色 blocked by CORS policy，新手最容易在这里耗一整天：改前端、换请求库、装禁用 CORS 的插件，全都不对。

根因永远是服务端 CORS 配置（或干脆同域部署）。面试常问「为什么 curl 没有跨域问题」「CORS 预检是什么」——本质考察你是否理解：CORS 是浏览器的安全机制，不是服务器拒绝了你。这一课学完，跨域问题从玄学变成流程。

先建立图像

源 = 协议 + 域名 + 端口，三者全同才算同源：

https://coderoadmap.cn  vs  https://api.coderoadmap.cn  → 跨源（域名不同）
http://localhost:3000   vs  http://localhost:8080       → 跨源（端口不同）
https://a.com           vs  http://a.com                → 跨源（协议不同）
https://coderoadmap.cn/x  vs  https://coderoadmap.cn/y  → 同源（路径不算）
http://127.0.0.1:3000   vs  http://localhost:3000       → 跨源（127.0.0.1 ≠ localhost）

两类请求的处理方式：

简单请求：直接发出 → 浏览器看响应头有没有 CORS 允许 → 决定 JS 能不能读
预检请求：先发 OPTIONS「我能不能发这种请求？」→ 通过后才发真正的 GET/POST/PUT…

触发预检的三类典型特征：

特征	例子
方法非简单方法（GET/HEAD/POST）	PUT、DELETE、PATCH
Content-Type 非简单值	application/json（表单三兄弟才是简单值）
带了自定义头	Authorization、X-Request-Id

服务器预检/响应里应出现（按需）：

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

红线：Allow-Origin: * 与 Allow-Credentials: true 互斥——带 Cookie 的跨源必须回显具体 Origin。

跟着做

步骤 1：给 Spring Boot 配一段真实可用的 CORS

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                // 生产写白名单；本地开发放 3000
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("Content-Type", "Authorization")
                .allowCredentials(true)          // 与具体 Origin 配对，不能配 "*"
                .maxAge(3600);                   // 预检结果缓存 1 小时，减少 OPTIONS
    }
}