CORS 概述
- 全称: 跨域资源共享(Cross-Origin Resource Sharing)
- 目的: 允许网页从不同源请求资源,实现安全的跨域通信。
CORS 工作流程
-
预检请求(Preflight Request)
- 对于某些请求类型(如 PUT、DELETE 或带有非简单头部的请求),浏览器先发送 OPTIONS 请求。
- 服务器返回响应头部,指明是否允许实际请求。
-
实际请求(Actual Request)
- 如果预检请求通过,浏览器发送实际请求。
-
响应头部(Response Headers)
- 服务器响应包含 CORS 特定头部,如
Access-Control-Allow-Origin
。
- 服务器响应包含 CORS 特定头部,如
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
类。
- 使用 SpringBoot 的
服务器 CORS 设置
- 通过设置响应头部配置 CORS,如允许所有源访问或特定源访问,允许凭据请求访问,允许特定方法和头部,设置预检请求的缓存时间。
常见问题及解决方案
-
缺少
Access-Control-Allow-Origin
头部。- 解决方案: 确保服务器端正确设置该头部。
-
请求包含凭据时,
Access-Control-Allow-Origin
不能为通配符*
。- 解决方案: 明确指定允许的源,并设置
Access-Control-Allow-Credentials
。
- 解决方案: 明确指定允许的源,并设置
-
预检请求失败。
- 解决方案: 确保服务器正确处理 OPTIONS 请求并返回相应的 CORS 头部。
总结
CORS 是现代 Web 开发中的重要机制,理解其工作原理和配置方法有助于有效解决跨域请求问题。