基础概念
同源策略(Same-Origin Policy)是一个重要的浏览器安全机制。它用于限制一个源(origin)的脚本无法读取另一个源的资源。
源是什么
源(origin)由以下三个部分组成:
- 协议(scheme)
- 域名(host)
- 端口(port)
限制的策略
允许跨源的操作
- 加载资源: 加载 CSS、JavaScript、图片、字体等静态资源可以跨源进行。例如在 HTML 中引用其他域名下的 CSS 文件或图片。
- 发送 GET 请求: 通过
<img>标签、<link>标签、<script>标签等发送 GET 请求可以跨源进行。
不允许跨源的操作
- 读取响应内容: 通过 XHR(XMLHttpRequest) 或 Fetch API 发送跨源请求时,无法读取响应内容的数据。
- 操作 DOM: 无法读取或修改其他源的 DOM 元素。
- 操作 Cookie: 无法读取或修改其他源的 Cookie。
- 发送敏感的 HTTP 请求: 如跨源的 POST、PUT、DELETE 等请求。
CORS是什么
CORS (Cross-Origin Resource Sharing) 是一种基于 HTTP 头的机制,它允许服务器指定哪些源站有权限访问哪些资源。
- 当浏览器检测到当前请求跨域时,会自动在请求头中添加 Origin 字段,内容为当前源(协议 + 域名 + 端口)。
- 服务器收到请求后,检查 Origin 头,根据自身的跨域策略决定是否允许这个源访问资源。
- 如果允许跨域访问,服务器需要在响应头中添加以下字段:
- Access-Control-Allow-Origin: 指定允许的源,可以是具体的域名,也可以是
*表示允许所有源。 - Access-Control-Allow-Methods: 指定允许的 HTTP 方法。
- Access-Control-Allow-Headers: 指定允许的请求头。
- Access-Control-Allow-Credentials: 是否允许发送 Cookie。
- Access-Control-Max-Age: 预检请求的有效期。
- 浏览器收到响应后,检查是否存在上述 CORS 响应头,如果存在则允许跨域请求成功,否则请求失败。