跨域资源共享(CORS)用户指南

跨域问题一直是开发工程师,特别是前端工程师关心的问题。主要的问题是安全限制(也即同源策略,即 JavaScript 或 Cookie 只能访问同域下的内容)。跨域访问,简单的说就是 A 网站的 JavaScript 代码试图访问 B 网站,包括提交内容和获取内容。

UPYUN 为了解决跨域问题,现已支持在管理中心进行 CORS 的配置,适用于全部源站类型,现在为大家讲解具体的使用方式。

首先进入管理后台

依次打开:「服务」-「高级功能」-「CORS 跨域共享」

点击「创建规则」,在弹出框内进行 CORS 跨域规则设置。

 

服务器端需要返回相应的响应头信息。设置项具体包括:

Access-Control-Allow-Origin ( 允许的域 )

Access-Control-Allow-Methods ( Methods )

Access-Control-Allow-Headers( Allow Headers )

Access-Control-Expose-Headers ( Expose Headers )

Access-Control-Max-Age ( 缓存时间 )

相关描述:

允许的域 :允许跨域的 Origin 列表

Methods :允许跨域的方法列表,按照需求开通对应的方法即可

Allow Header :允许跨域的 Header 列表

Expose Header :允许暴露给 JavaScript 代码的 Header 列表

缓存时间 :最大的浏览器缓存时间,单位秒

接下来就说说每个配置项的使用方法:

(1) 允许的域(Access-Control-Allow-Origin):

返回的资源需要有一个 Access-Control-Allow-Origin 头信息,语法结构如下:Access-Control-Allow-Origin: | *

因此配置可以如下设置:

origin 参数指定一个允许向该服务器提交请求的 URI 。对于一个不带有 credentials 的请求,可以指定为'*',表示允许来自所有域的请求。这种设置相对宽泛,如果对安全性要求比较高的话,不建议这么设置。

例如来自 http://test.abc.com 的请求,你可以这样指定:Access-Control-Allow-Origin: http://test.abc.com 即:

如果服务器端指定了域名,而不是 '*' ,那么响应头的 Vary 值里必须包含 Origin。它告诉客户端: 响应是根据请求头里的 Origin 的值来返回不同的内容的。

该选项必填,每行一个且最多可设置 20 行,支持 '*' 通配符。

(2)Methods (Access-Control-Allow-Methods)

指明资源可以被请求的方式有哪些(一个或者多个). 这个响应头信息在客户端发出预检请求的时候会被返回。支持的方法有:GET,HEAD,PUT,POST,DELETE,OPTIONS

(3)Allow Header (Access-Control-Allow-Headers)

该配置项也是在响应预检请求的时候使用.用来指明在实际的请求中,可以使用哪些自定义 HTTP 请求头。比如

Access-Control-Allow-Headers: X-PINGOTHER

这样在实际的请求里,请求头信息里就可以有这么一条:

X-PINGOTHER: pingpong

可以有多个自定义 HTTP 请求头,每行一个。

(4)Expose Header (Access-Control-Expose-Headers)

该配置是设置浏览器允许访问的服务器的头信息的白名单:

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

这样, X-My-Custom-Header 和 X-Another-Custom-Header 这两个头信息,都可以被浏览器得到.

(5)缓存时间 (Access-Control-Max-Age)

这个头告诉我们这次预请求的结果的有效期是多久,如下:

Access-Control-Max-Age: 600

600 这里表示 600 秒,允许这个预请求的参数缓存的秒数,在此期间,不用发出另一条预检请求。Access-Control-Allow-Credentials

告知客户端,当请求的 credientials 属性是 true 的时候,响应是否可以被得到。当它作为预请求的响应的一部分时,它用来告知实际的请求是否使用了 credentials。注意,简单的 GET 请求不会预检,所以如果一个请求是为了得到一个带有 credentials 的资源,而响应里又没有 Access-Control-Allow-Credentials 头信息,那么说明这个响应被忽略了。

Access-Control-Allow-Credentials: true | false

配置完成后,点击「保存」按钮进行提交,提示修改成功则配置完成。

 

6、注意事项

最多支持添加 10 条规则,匹配时从第一条开始逐条匹配,以最早匹配上的规则为准。

「允许的域」、「Allow Header」 、「Expose Header」 最多允许 20 行。

「允许的域」及「 Methods 」建议根据需要使用最小的配置来保证安全性,多条规则间不要有覆盖和冲突。

「允许的域」需带上完整的域信息,即指定 https 或者 http,或者 *://foo.com 这样的形式。

「Allow Header」建议没有特殊需求的情况下设置为 *,大小写不敏感。

「Expose Header」不允许使用通配符,如果有特殊需求可以单独指定,大小写不敏感。

「缓存时间」如果没有特殊情况可以酌情设置得大一点,默认为 86400 秒,最大为 604800 秒。

 

留下一个评论