后端CORS预检梳理.md

# 后端CORS预检梳理

## CORS

CORS：跨源资源共享，英文全称为 Cross-Origin Resource Sharing

在日常开发时，后端往往需要允许跨域或添加来源白名单；而项目部署后一般不需要额外配置 CORS，为什么？在此做一个简单梳理


## 同源判断

同源是指 URL 的协议、域名和端口均相同，任何一项不同，都不属于同源

开发时，前端 Vue 和后端 Java 通常是分开运行的：

```
前端：http://127.0.0.1:5173
后端：http://127.0.0.1:8080
前端API请求：http://127.0.0.1:8080/api
```

前端与请求的 API 协议相同、域名相同，但端口不同，因此不属于同源，会触发跨域处理，并交由后端的CORS预检判断

## CORS预检

CORS 预检类似于一道门禁，但并不是每个请求都会触发。浏览器会根据跨域请求的方法、请求头等条件，判断是否需要先发送 OPTIONS 预检请求

而，后端则根据 CORS 白名单判断是否允许该来源、请求方法和请求头。若预检失败，浏览器不会继续发送实际请求，前端通常会显示跨域错误

> 白名单示例：
>
> ```properties
> app.cors.origins=${CORS_ORIGINS:http://localhost:5173,http://127.0.0.1:5173}
> ```

部分简单跨域请求不会触发预检，而是直接发送实际请求，再由浏览器根据后端返回的 CORS 响应头判断前端能否读取响应

## 项目部署无需CORS

项目部署在服务器后通常无需额外配置 CORS，因为前端和请求的 API 一般通过同一个域名访问，不会产生跨域

```
部署后的前端：https://tilex.world
部署后的前端API接口：https//tilex.world/api
```

此时，两者的协议、域名和端口均相同，属于同源请求，因此浏览器不会触发 CORS 处理。Nginx 即使在服务器内部将 `/api` 反向代理到其他端口，也不会影响浏览器对同源的判断，不会触发后端的CORS门禁