写点什么

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

发布于: 2 小时前
对象存储手把手教六 | 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 的设置,解决您在开发过程中遇到的跨域问题。

发布于: 2 小时前阅读数: 3
用户头像

拥抱云原生存储 2021.06.29 加入

公众号:QingStor 分布式存储。 提供云原生时代的全栈存储知识与服务,驱动数据引领业务创新!

评论

发布
暂无评论
对象存储手把手教六 | CORS 入门讲解