在浏览器中，**同源策略**是前端安全的基础，它要求协议、域名和端口必须完全一致才能直接访问彼此的数据。一旦前端页面请求的资源来自不同源，就会触发“跨域”限制，这也是我们常听到的 CORS（跨域资源共享）要解决的问题。
为什么会出现跨域
跨域问题并不是网络传输失败，而是浏览器为了防止恶意站点窃取数据，在前端层面进行的安全限制。
- 只要协议、域名、端口有一项不同，就被判定为跨域。
- 常见触发场景包括：前端访问后端 API，资源部署在 CDN 上，或者子域与主域之间通信。
CORS 的工作原理
CORS（Cross-Origin Resource Sharing）是一种让服务器声明“哪些源可以访问我”的机制。
1. 浏览器在请求时会带上 Origin 信息，告诉服务器请求的来源。
2. 服务器在响应头中返回 Access-Control-Allow-Origin 等字段，明确告知允许哪些域访问。
3. 浏览器根据返回的权限判断，决定是否把响应数据交给前端 JavaScript 使用。
两种跨域请求方式
1. 简单请求
- 请求方法是 GET、HEAD、POST
- 请求头中没有自定义字段
- Content-Type 限制在几种安全类型
- 浏览器直接发送请求，服务器只需在响应中声明允许的来源。
2. 预检请求（Preflight）
- 请求方法是 PUT、DELETE、PATCH 等
- 或者带有自定义请求头、非安全 Content-Type
- 浏览器会先发一个 OPTIONS 请求“询问”服务器是否允许跨域，再发送正式请求。
常见跨域配置点
- 允许的来源（Access-Control-Allow-Origin）：可以是具体域名，也可以是 *（但不能携带凭证）。
- 允许的方法（Access-Control-Allow-Methods）：列出跨域允许的 HTTP 方法。
- 允许的请求头（Access-Control-Allow-Headers）：声明前端可以带的自定义头字段。
- 暴露的响应头（Access-Control-Expose-Headers）：让前端可读取特定的响应头。
- 是否允许携带凭证（Access-Control-Allow-Credentials）：开启后可带 cookie，但来源不能是 *。
- 预检结果缓存时间（Access-Control-Max-Age）：减少重复预检请求的次数。
跨域与安全
开启 CORS 并不等于开放所有权限，尤其是涉及用户隐私、业务敏感数据时，需要：
- 精确限制可访问的域名
- 最小化暴露的请求方法和头字段
- 在允许携带凭证时，确保只针对可信来源开放
总结
CORS 并不是“绕过”浏览器安全机制，而是在安全框架下，有选择地放行跨域访问。理解它的原理和配置逻辑，不仅能解决前端跨域报错，还能确保系统在开放访问的同时保持安全可控。