知道什么是 CORS嘛？一文搞懂 CORS 原理！

CORS 概述

• 全称: 跨域资源共享（Cross-Origin Resource Sharing）
• 目的: 允许网页从不同源请求资源，实现安全的跨域通信。

CORS 工作流程

1. 预检请求（Preflight Request）

   • 对于某些请求类型（如 PUT、DELETE 或带有非简单头部的请求），浏览器先发送 OPTIONS 请求。
   • 服务器返回响应头部，指明是否允许实际请求。

2. 实际请求（Actual Request）

   • 如果预检请求通过，浏览器发送实际请求。

3. 响应头部（Response Headers）

   • 服务器响应包含 CORS 特定头部，如 Access-Control-Allow-Origin。

Origin 定义

• Origin 由协议、域名和端口组成，三者完全一致才视为同一来源。

同源策略（Same-Origin Policy, SOP）

• 防止恶意网站通过脚本访问其他网站内容。
• 同源指协议、域名和端口相同。

跨域请求

• 从一个域向另一个域发起的 HTTP 请求。
• 常见于现代 Web 应用，如前端向后端 API 请求数据。

CORS 请求类型

• 简单请求: 使用 GET、POST、HEAD 方法，且请求头部符合特定条件。
• 预检请求: 对于复杂请求，浏览器先发送 OPTIONS 请求。

CORS 头部字段

• Access-Control-Allow-Origin: 指示允许访问资源的源。
• Access-Control-Allow-Credentials: 是否允许发送凭据（如 Cookies）。
• Access-Control-Expose-Headers: 指示哪些头部可以作为响应的一部分被访问。

实现 CORS

• 客户端处理: 发送签名请求，如在请求头中包含 Authorization。
• 服务器端处理:
  • 使用 SpringBoot 的 @CrossOrigin 注解。
  • 采用过滤器（filter）方式。
  • 配置 Configuration 类。

服务器 CORS 设置

• 通过设置响应头部配置 CORS，如允许所有源访问或特定源访问，允许凭据请求访问，允许特定方法和头部，设置预检请求的缓存时间。

常见问题及解决方案

1. 缺少 Access-Control-Allow-Origin 头部。

   • 解决方案: 确保服务器端正确设置该头部。

2. 请求包含凭据时，Access-Control-Allow-Origin 不能为通配符 *。

   • 解决方案: 明确指定允许的源，并设置 Access-Control-Allow-Credentials。

3. 预检请求失败。

   • 解决方案: 确保服务器正确处理 OPTIONS 请求并返回相应的 CORS 头部。

总结

CORS 是现代 Web 开发中的重要机制，理解其工作原理和配置方法有助于有效解决跨域请求问题。