CORS 跨域资源共享原理

浏览器有同源策略：协议、域名、端口三者任意一个不同，就是跨域；浏览器会拦截跨域的响应，请求其实已经发出去了，只是浏览器不让 JS 拿到返回结果。

CORS（Cross‑Origin Resource Sharing，跨域资源共享）是一套HTTP 响应头规范，由服务端配置，告诉浏览器 “允许哪些来源跨域访问我的接口”，浏览器校验通过后，就放行响应给前端 JS。

⚠️ CORS不是前端做的，核心逻辑在后端；前端代码不用改，浏览器自动处理请求头。

两类请求：简单请求 & 预检请求

1. 简单请求（不会发 OPTIONS 预检）

满足全部条件：

1. 请求方法：GET / POST / HEAD

2. 请求头只能是浏览器自动生成，自定义头不能加；Content‑Type仅限：application/x‑www‑form‑urlencoded、multipart/form‑data、text/plain

流程：

1. 浏览器直接发起真实请求，自动带上 Origin 请求头，标记请求来源域名

Origin: https://a.com

2. 服务器返回 CORS 响应头

Access‑Control‑Allow‑Origin: https://a.com   # 允许该域名；*代表全部域名
Access‑Control‑Allow‑Credentials: true       # 是否允许携带cookie
Access‑Control‑Expose‑Headers: X‑Token       # 允许JS读取哪些自定义响应头

3. 浏览器对比 Origin 和 Access‑Control‑Allow‑Origin

• ✅匹配：JS 正常拿到响应

• ❌不匹配：浏览器抛出 CORS 错误，JS 拿不到数据，网络面板能看到完整返回体

2. 非简单请求（触发 OPTIONS 预检）

PUT、DELETE、带自定义请求头、Content‑Type:application/json 等，会先发送一次OPTIONS 预检请求，询问服务器是否允许跨域。

流程：

1. 浏览器先发 OPTIONS 预检请求

OPTIONS /api HTTP/1.1
Origin: https://a.com
Access‑Control‑Request‑Method: POST    # 实际要使用的请求方法
Access‑Control‑Request‑Headers: token  # 实际要携带的自定义请求头

2. 后端对 OPTIONS 返回 CORS 校验头

Access‑Control‑Allow‑Origin: https://a.com
Access‑Control‑Allow‑Methods: GET,POST,PUT,DELETE  # 允许的请求方法
Access‑Control‑Allow‑Headers: token,content‑type   # 允许的请求头
Access‑Control‑Max‑Age: 86400                      # 预检缓存秒数，减少OPTIONS重复请求

3. 浏览器校验预检响应头全部合法，才发送真正业务请求；校验失败直接报错，不会发出真实请求。

关键响应头详解

常见误区

1. ❌前端配置 CORS：CORS 是服务端响应头，前端无法绕过浏览器同源策略；代理（webpack/vite proxy）是本地开发服务器中转，不是 CORS。

2. ❌*可以配合 Cookie：不行，开启 Credentials 后Access‑Control‑Allow‑Origin不能为*，必须写具体域名。

3. ❌CORS 阻止请求发送：大部分场景请求已经到达后端，浏览器拦截返回结果；OPTIONS 预检失败才不会发真实请求。

4. ❌CORS 是安全漏洞：CORS 是放宽同源策略，由服务端主动授权，后端配置错误才会产生安全风险。

补充：和 JSONP 对比

• JSONP：只支持 GET，利用 script 标签不受同源限制，旧时代方案，现在基本淘汰。

• CORS：标准 W3C 规范，支持所有 HTTP 方法，现代浏览器全部支持，是正式跨域解决方案。

SpringBoot 极简示例（Java）

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://a.com")
                .allowedMethods("GET","POST","PUT","DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(86400);
    }
}

本文原创作者：易君召，详见：https://www.yijunzhao.cn/authors/yijunzhao，转载请注明出处。

原文链接 https://www.yijunzhao.cn/archives/cors-cross-origin-resource-sharing-principles-guide

欢迎访问 小易撩挨踢