333 lines
10 KiB
Markdown
333 lines
10 KiB
Markdown
---
|
||
title: 跨域资源共享(CORS)
|
||
createTime: 2020/08/29 07:40:31
|
||
author: pengzhanbo
|
||
tags:
|
||
- http
|
||
permalink: /article/2f45bq9x/
|
||
---
|
||
|
||
**跨域资源共享（CORS）** 是一种基于 **HTTP Header** 的机制。
|
||
该机制通过允许服务器标示除了它自己的 origin（域，协议和端口），使这些 origin 有权限访问加载服务器上的资源。
|
||
|
||
<!-- more -->
|
||
|
||
跨域资源共享 通过 **预检请求** 的机制，检查服务器是否允许要发送的真实请求。
|
||
浏览器向服务器发送一个到服务器托管的跨域资源 **预检请求**，
|
||
在预检请求中，浏览器发送的头部中标示有HTTP方法和真实请求会用到的头。
|
||
|
||
## 前言
|
||
|
||
浏览器出于安全性的原因，会限制脚本内发起的跨域资源请求，
|
||
比如 **XMLHttpRequest** 和 **Fetch API** 遵循 **同源策略**，默认情况下不允许发起非同源的资源请求。
|
||
使用这些API的Web应用，只能加载从应用程序的同一个域的请求HTTP资源，
|
||
**除非响应报文中包含了正确的CORS响应头**
|
||
|
||
## 概述
|
||
|
||
跨域资源共享 新增了一组 HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
|
||
同时，对于可能对服务器数据产生副作用的 HTTP 请求方法，浏览器必须首先使用 `OPTIONS` 方法发起一个预检请求，
|
||
从而获取服务器是否允许跨域请求，服务器确认允许之后，才发起实际的HTTP请求。
|
||
|
||
CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码中，是无法获取具体是哪里出了问题。
|
||
我们只能通过查看浏览器的控制台来获取具体出现的错误。
|
||
|
||
若要开启 CORS ，我们需要配置 CORS 相关的 HTTP首部字段。
|
||
|
||
## HTTP 响应首部字段
|
||
|
||
在 CORS 中，HTTP 响应首部字段主要有以下几个：
|
||
|
||
- **Access-Control-Allow-Origin**
|
||
- **Access-Control-Allow-Methods**
|
||
- **Access-Control-Allow-Headers**
|
||
- **Access-Control-Max-Age**
|
||
- **Access-Control-Expose-Headers**
|
||
- **Access-Control-Allow-Credentials**
|
||
|
||
### Access-Control-Allow-Origin
|
||
|
||
**Access-Control-Allow-Origin** 响应首部字段，用于 **指定允许访问该资源的外域URI**。
|
||
|
||
对于不需要携带身份凭证的请求，服务器可以指定改字段的值为通配符(`*`)，表示允许来自所有域的请求。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Allow-Origin: <origin>
|
||
Access-Control-Allow-Origin: *
|
||
```
|
||
|
||
如果服务器 指定了具体的域名而非 `*`，那么响应首部中的 **Vary** 字段的值必须包含 `Origin`。
|
||
用于告诉客户端：服务器对不同的源站返回不同的内容。
|
||
|
||
::: info 注意
|
||
当响应的是附带身份凭证的请求时，服务端 必须 明确 **Access-Control-Allow-Origin** 的值，而不能使用通配符`“*”`。
|
||
:::
|
||
|
||
**示例1：**
|
||
|
||
允许所有域访问
|
||
```
|
||
Access-Control-Allow-Origin: *
|
||
```
|
||
|
||
**示例2：**
|
||
|
||
允许来自 https://pengzhanbo.cn 的请求
|
||
```
|
||
Access-Control-Allow-Origin: https://pengzhanbo.cn
|
||
Vary: Origin
|
||
```
|
||
|
||
### Access-Control-Allow-Methods
|
||
|
||
**Access-Control-Allow-Methods** 响应首部字段用于 预检请求的响应。
|
||
**指明了实际请求所允许使用的HTTP方法或方法列表**。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Allow-Methods: <method>[, <method>]*
|
||
```
|
||
|
||
示例：
|
||
|
||
```
|
||
Access-Control-Allow-Methods: POST, GET, OPTIONS
|
||
```
|
||
|
||
### Access-Control-Allow-Headers
|
||
|
||
**Access-Control-Allow-Headers** 响应首部字段用于 预检请求的响应。
|
||
**指明了实际请求中允许携带的首部字段**。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Allow-Headers: <header-name>[, header-name]*
|
||
Access-Control-Allow-Headers: *
|
||
```
|
||
|
||
以下特定的首部是一直允许的，无需特意声明他们：
|
||
- Accept
|
||
- Accept-Language
|
||
- Content-Language
|
||
- Content-Type，但只在其值属于MIME类型 `application/x-www-form-urlencoded`,`multipart/form-data`,`text/pain` 中的一种。
|
||
|
||
**示例1：**
|
||
|
||
自定义请求头。 除了 CORS 安全清单列出的请求头外，支持 自定义请求头 X-Custom-Header
|
||
|
||
```
|
||
Access-Control-Allow-Headers: X-Custom-Header
|
||
```
|
||
|
||
**示例2：**
|
||
|
||
多个自定义请求头。
|
||
|
||
```
|
||
Access-Control-Allow-Headers: X-Custom-Header, X-My-Header
|
||
```
|
||
|
||
### Access-Control-Max-Age
|
||
|
||
**Access-Control-Max-Age** 响应首部字段表示 **预检请求的返回结果可以被缓存多久**。
|
||
|
||
返回结果是指： **Access-Control-Allow-Methods** 和 **Access-Control-Allow-Headers** 提供的信息。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Max-Age: <delta-seconds>
|
||
```
|
||
|
||
**delta-seconds** 表示返回结果可以被缓存的最长时间（秒）。
|
||
在 Firefox 中， 上限是 **24小时（86400秒）**。
|
||
在 Chromium 中，上限是 **2小时（7200秒）**，同时 Chromium 还规定了默认值是 **5秒**。
|
||
如果值为 **-1** ， 表示禁用缓存，则每次请求前都需要使用 OPTIONS 预检请求。
|
||
|
||
**示例**
|
||
|
||
将预检请求缓存 10分钟：
|
||
```
|
||
Access-Control-Max-Age: 600
|
||
```
|
||
|
||
### Access-Control-Expose-Headers
|
||
|
||
**Access-Control-Expose-Headers** 响应首部字段，列出了 哪些首部可以作为响应的一部分暴露给外部。
|
||
|
||
在 跨源访问时，XMLHttpRequest 对象的 `getResponseHeader()` 方法默认只能拿到一些最基本的响应头。
|
||
|
||
默认情况下，只有七种 简单响应首部 可以暴露给外部:
|
||
|
||
- Cache-Control
|
||
- Content-Language
|
||
- Content-Length
|
||
- Content-Type
|
||
- Expires
|
||
- Last-Modified
|
||
- Pragma
|
||
|
||
如果期望让客户端可以访问到其他的首部信息，可以将它们 该字段受列出来。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Expose-Headers: <header-name>[, <header-name>]*
|
||
```
|
||
|
||
**示例**
|
||
|
||
暴露一个非简单响应首部：
|
||
```
|
||
Access-Control-Expose-Headers: X-My-Header
|
||
```
|
||
|
||
暴露多个非简单响应首部：
|
||
```
|
||
Access-Control-Expose-Headers: X-My-Header, X-Custom-Header
|
||
```
|
||
|
||
### Access-Control-Allow-Credentials
|
||
|
||
**Access-Control-Allow-Credentials** 响应首部字段 用于在 请求包含 Credentials 时，
|
||
告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。
|
||
|
||
当请求的 Credentials 模式 （Request.credentials）为 `include` 时，浏览器尽在相应头 **Access-Control-Allow-Credentials** 的值为 `true` 时将响应暴露给前端的 JavaScript 代码。
|
||
|
||
Credentials 可以是 `cookies`、 `authorization headers` 或 `TLS client certificates`。
|
||
|
||
语法：
|
||
```
|
||
Access-Control-Allow-Credentials: true
|
||
```
|
||
|
||
**Access-Control-Allow-Credentials** 需要与 `XMLHttpRequest.withCredentials`
|
||
或 **Fetch API** 的 `Request()` 构造函数中的 `credentials` 选项结合使用。
|
||
Credentials 必须在前后端都被配置，才能使带 credentials 的 CORS 请求成功。
|
||
|
||
**示例：**
|
||
|
||
允许 credentials
|
||
|
||
```
|
||
Access-Control-Allow-Credentials: true
|
||
```
|
||
|
||
使用带 credentials 的 XHR:
|
||
|
||
``` js
|
||
const xhr = new XMLHttpRequest()
|
||
xhr.open('GET', 'https://pengzhanbo.cn', true)
|
||
xhr.withCredentials = true
|
||
xhr.send(null)
|
||
```
|
||
|
||
使用带 credentials 的 Fetch:
|
||
|
||
``` js
|
||
fetch('https://pengzhanbo.cn', {
|
||
credentials: 'include'
|
||
})
|
||
```
|
||
|
||
## HTTP 请求首部字段
|
||
|
||
在 CORS 中，可用于发起跨域请求的首部字段，如下：
|
||
|
||
- Origin
|
||
- Access-Control-Request-Method
|
||
- Access-Control-Request-Headers
|
||
|
||
这些首部字段无需手动设置。
|
||
|
||
当开发者使用 XMLHttpRequest 发起跨域请求时，它们已经被设置就绪。
|
||
|
||
### Origin
|
||
|
||
**Origin** 请求首部字段表明预检请求或实际请求的源站。
|
||
|
||
语法：
|
||
|
||
```
|
||
Origin: <origin>
|
||
```
|
||
|
||
origin 参数的值为源站的URI。不包含任何路径信息，仅表示服务器名称。
|
||
|
||
### Access-Control-Request-Method
|
||
|
||
**Access-Control-Request-Method** 请求首部字段用于预检请求。作用是 将实际情况所使用的HTTP方法告诉服务器。
|
||
|
||
语法：
|
||
|
||
```
|
||
Access-Control-Request-Method: <method>
|
||
```
|
||
|
||
### Access-Control-Request-Headers
|
||
|
||
**Access-Control-Request-Headers** 请求首部字段用于预检请求。作用是 将实际请求所携带的首部字段告诉服务器。
|
||
|
||
语法：
|
||
|
||
```
|
||
Access-Control-Request-Headers: <header-name>[, <header-name>]*
|
||
```
|
||
|
||
## 预检请求
|
||
|
||
一个 CORS 预检请求时用于 检查服务器使用支持 CORS， 即 跨域资源共享。
|
||
|
||
预检请求 通过 发送一个 OPTIONS 请求，请求头部包含了以下字段：
|
||
|
||
- Access-Control-Request-Method
|
||
- Access-Control-Request-Headers
|
||
- Origin
|
||
|
||
浏览器会在有必要的时候，自动发出一个预检请求。
|
||
|
||
所以在正常情况下，前端开发者不需要自己去发送这样的请求。
|
||
|
||
### 预检请求与凭据
|
||
|
||
CORS 预检请求不能包含凭据。预检请求的响应必须指定 Access-Control-Allow-Credentials: true 来表明可以携带凭据进行实际的请求。
|
||
|
||
## 简单请求
|
||
|
||
某些情况下，不会触发 CORS预检请求，这样的请求，可表述为 _简单请求_。
|
||
|
||
若请求满足以下所有条件，则可视为 简单请求：
|
||
|
||
- 使用 GET, HEAD POST 请求方法
|
||
- 除了被用户代理自动设置的首部字段（Connection，User-Agent等），
|
||
以及在 Fetch 规范中定义为 [禁用首部名称](https://fetch.spec.whatwg.org/#forbidden-header-name) 的其他首部，
|
||
允许人为设置的字段为 Fetch 规范定义的 对 [CORS 安全的首部字段集合](https://fetch.spec.whatwg.org/#cors-safelisted-request-header)
|
||
- 请求中任意的 XMLHttpRequest 对象均没有注册任何监听事件，
|
||
XMLHttpRequest 对象可以使用 XMLHttpRequest.upload 属性访问。
|
||
- 请求中没有使用 ReadableStream 对象。
|
||
|
||
## 附带身份的请求与通配符
|
||
|
||
在响应附带身份凭证的请求时：
|
||
|
||
- 服务器不能将 **Access-Control-Allow-Origin** 的值设为通配符 `*`，而应将其设置为特定的域，如：Access-Control-Allow-Origin: https://pengzhanbo.cn。
|
||
|
||
- 服务器不能将 **Access-Control-Allow-Headers** 的值设为通配符 `*`，而应将其设置为首部名称的列表，如：Access-Control-Allow-Headers: X-Custom-Header, Content-Type
|
||
|
||
- 服务器不能将 **Access-Control-Allow-Methods** 的值设为通配符 `*`，而应将其设置为特定请求方法名称的列表，如：Access-Control-Allow-Methods: POST, GET
|
||
|
||
|
||
## 需要CORS的场景
|
||
|
||
1. 使用 **XMLHttpRequest** 发起的 HTTP请求
|
||
2. 使用 **Fetch API** 发起的 HTTP 请求
|
||
3. Web字体，CSS通过 `@font-face` 使用的跨域字体资源
|
||
4. WebGL 贴图
|
||
5. 使用 drawImage 将 Images/video 画面绘制到 canvas
|
||
6. 来自图像的 CSS 图形
|
||
|
||
|
||
## 安全
|
||
|
||
在实际的使用场景中，尽可能的少使用 通配符 `*`，来允许所有域访问，或允许所有自定义首部字段，
|
||
这可能在 web 安全上来带风险。
|