对象存储手把手教六 | CORS 入门讲解

作者简介：张迪，QingStor 研发工程师，主要负责对象存储相关产品前端研发工作。

一 浏览器的同源策略

要了解什么是 CORS，需要先知道什么是浏览器的同源策略。

同源策略是浏览器中一个重要的安全策略，是指在 Web 浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的协议、域名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。

Web 内容的源由用于访问它的 URL （Uniform Resource Locator， 统一资源定位符）定义。一个 URL 由不同的部分组成，只有当两个 URL 中的协议，域名和端口号都相同时，两个 URL 具有相同的起源。

举例来说 http://www.example.com/app1/index.html 这个网址的协议、域名和端口号分别为：

它的同源情况如下：

出于网页安全性的考虑，浏览器限制 Web 应用通过 Ajax（异步的 JavaScript 和 XML）或者其他机制从另一个站点访问资源、获取数据，但是通过设置 CORS 可以允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 Ajax 只能同源使用的限制。

二 什么是 CORS

CORS 是由 W3C 发布的跨源资源共享（Cross-Origin Resource Sharing）正式推荐标准，该标准定义了在必须访问跨域资源时，浏览器与服务端应该如何沟通。它提供了一种机制，允许客户端（如浏览器）对非同源站点的资源发出访问请求。

CORS 通过新增一系列 HTTP 响应头部（HTTP Response Header），通知浏览器资源可以被哪些跨源站点以何种 HTTP 方法获得。例如，浏览器在访问 http://example.com 站点的 Web 应用时，Web 应用如果需要跨站访问另一站点的资源 http://hello-world.example，就需要使用该标准。http://hello-world.example 在 HTTP 的响应头部中定义 Access-Control-Allow-Origin: http://example.com，通知浏览器允许 http://example.com 跨源从 http://hello-world.example 上获取资源。

浏览器将 CORS 请求分成两类来处理：简单请求和非简单请求。

2.1 简单请求

对于跨域请求如果符合以下所有条件，则被视为简单请求：

1、使用下列方法之一：

•GET

•HEAD

•POST

2、HTTP 头部限制以下字段：

•Accept

•Accept-Language

•Content-Language

•Content-Type （只限于以下三个值：text/plain、multipart/form-data、application/x-www-form-urlencoded）

•DPR

•Downlink

•Save-Data

•Viewport-Width

•Width

3、请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

4、请求中没有使用 ReadableStream 对象。

对于简单请求，浏览器直接发出 CORS 请求。并且头信息之中，增加一个 Origin 头部字段。

比如下面这个例子，浏览器检查跨源 Ajax 请求是简单请求，自动在 Request 头部中添加一个 Origin: http://www.example.com 字段。

GET /resources/public-data/ HTTP/1.1Host: https://api.qingstor.comUser-Agent: Mozilla/5.0...Accept-Language: en-USOrigin: http://www.example.com...

Request 头部中的 Origin 字段表明本次请求来自哪个源，服务器根据这个值，决定是否同意这次请求。

如果服务器允许此次请求，服务器返回的 Response 头部中会多出几个字段。比如下面例子中 Access-Control-Allow-Origin: http://www.example.com ，表示服务器允许此次跨域请求， 值也可以是一个*，表示接受任意域名的请求。

HTTP/1.1 200 OKDate: Sun, 04 Jul 2021 10:27:32 GMTServer: nginxcontent-type: text/html; charset=UTF-8Access-Control-Allow-Origin: http://www.example.com...

当浏览器接收到服务器返回的响应后，将检查响应头部中 Access-Control-Allow-Origin 与请求头部中的 Origin 比较是否一致后决定这个请求是否可以突破同源策略的限制，进行下一步的处理。

2.2 非简单请求

不符合简单请求条件的跨域请求即为非简单请求。

与简单请求不同，非简单请求在正式通信之前，浏览器先使用 HTTP OPTIONS 方法自动发起一个预检请求到服务器，以获知服务器是否允许该实际请求。只有得到肯定的答复后才会发出正式的 AJAX 请求。

例子：

OPTIONS /resources/public-data/ HTTP/1.1Host: http://api.qingstor.comUser-Agent: Mozilla/5.0...Accept-Language: en-USOrigin: http://www.example.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-Header...

上面例子中，预检请求使用 OPTION 方法，并增加了两个请求头：

1、Access-Control-Request-Method

用于通知服务器在后面的 CORS 请求中会采用哪种 HTTP 方法。

2、Access-Control-Request-Headers

用于通知服务器在后面的 CROS 请求中会采用哪些请求头。

服务器收到预检请求以后，如果接受后续的实际请求，就可以做出回应：

HTTP/1.1 200 OKDate: Sun, 04 Jul 2021 10:27:32 GMTServer: nginxAccess-Control-Allow-Origin: http://www.example.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderAccess-Control-Max-Age: 86400Content-Type: text/html; charset=utf-8...

上面的 HTTP 回应中：

1.首部字段 Access-Control-Allow-Methods 表明服务器允许客户端使用 GET, POST 和 PUT 方法发起后续的实际请求。

2.首部字段 Access-Control-Allow-Headers 表明服务器允许请求中携带字段 X-Custom-Header。

3.首部字段 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒，也就是 24 小时。

在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

如果浏览器拒绝了预检请求，会返回一个正常的 HTTP 回应，但是没有任何 CORS 相关的头信息字段。

三 什么情况下需要 CORS

3.1 使用 QingStor 对象存储作为静态资源服务器

通常为了减轻 WEB 服务器的负载，我们可以将 js、css，img 等静态资源存放在青云对象存储服务中，通过 URL 指定想要访问的资源。由于 WEB 网页的源与存储服务的源不一样容易引起跨域问题，此时可以通过设置 Bucket 的 CORS 解决。

四 如何给 Bucket 设置 CORS

4.1 Bucket CORS 的配置文档

Bucket CORS 用于设置存储空间的跨源资源共享（CORS）策略, CORS 只有存储空间的所有者才能设置，各项配置如下：

QingStor 官方文档链接：https://docsv3.qingcloud.com/storage/object-storage/api/bucket/cors/put_cors/

Bucket CORS 示例配置

{"cors_rules": [{"allowed_origin": "http://*.qingcloud.com", "allowed_methods": ["PUT", "GET",  "DELETE", "POST"  ], "allowed_headers": [ "x-qs-date",   "Content-Type", "Content-MD5","Authorization"], "max_age_seconds": 200,  "expose_headers": [ "x-qs-date" ] },  { "allowed_origin": "http://*.example.com", "allowed_methods": [ "PUT",      "GET",  "DELETE",  "POST"  ],  "allowed_headers": [  "*"  ],    "max_age_seconds": 400  } ],  "resp_vary": "enable"}

4.2 通过青云控制台设置 Bucket CORS 指南

在青云控制台可以直接进行 Bucket CORS 的各项设置

1、点击 Bucket 名称进入「Bucket 详情」页面 - 点击「设置」 - 再选择左侧的「CORS」选项。

2、点击「添加请求源」，创建不同的规则，实现允许或拒绝相应的跨域请求。

3、设置完成后，单击「提交」完成设置，可以看到已添加完成的跨域访问规则。如需修改可双击规则进行设置。

五 结尾

通过阅读本文，相信您对 CORS 加深了了解，并通过 Qingstor 对象存储中 Bucket CORS 的设置，解决您在开发过程中遇到的跨域问题。