跨域配置

跨域资源共享(Cross-Origin Resource Sharing,简称 CORS),是 HTML5 提供的标准跨域解决方案,具体的CORS规则可以参考 W3C CORS规范

在实际应用中,经常会有跨域访问的需求。比如用户的网站 www.a.com,后端使用了 NOS,在网页中提供了使用 JavaScript 实现的上传功能,但是在该页面中,只能向 www.a.com 发送请求,向其他网站发送的请求都会被浏览器拒绝。这样会导致用户上传的数据必须从 www.a.com 中转。如果设置了跨域访问的话,用户就可以直接上传到 NOS 而无需从 www.a.com 中转。

这是因为出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求。例如,XMLHttpRequest 和 Fetch 遵循同源策略。因此,使用 XMLHttpRequest或 Fetch 的Web应用程序只能将HTTP请求发送到其自己的域。为了改进Web应用程序,开发人员要求浏览器厂商允许跨域请求。

网易云的「对象存储」中提供了进行跨域的相关配置。

操作步骤

跨域配置

1.在桶列表找到对应的桶,点击[基础配置],如图所示

2.在[基础配置]页,找到[跨域配置]

3.点击「添加规则」,在弹出的对话框中,我们需要填写和选择如下内容如下:

  • 来源: 表示要跨域的域名,如果允许所有则输入 *;需要注意的是根据相关标准,配置的时候要带上完整的域信息,比如示例中 http://domain.com;
  • Method: 表示需要跨域的 HTTP 方法;
  • Allow Header: 表示允许的 HTTP 头,如果没有特殊需要,可以留空不填;
  • Expose Header:暴露给浏览器的Header列表,不允许使用通配符,最多添加 10个;
  • 缓存时间:如果没有特殊情况可以酌情设置的大一点;

以下测试是在来源中填写的是 http://domain.com; Method 选择 HEAD 和 GET,Allow Header 和 Expose Header 都留空,缓存时间设置为 1 天的情况下进行。

这里使用 curl 命令进行测试,结果如下:

   # curl -I http://neteasefile1.nos-eastchina1.126.net/1.png -H "origin:http://domain.com" -v
    *   Trying 59.111.35.2...
    * TCP_NODELAY set
    * Connected to neteasefile1.nos-eastchina1.126.net (59.111.35.2) port 80 (#0)
    > HEAD /1.png HTTP/1.1
    > Host: neteasefile1.nos-eastchina1.126.net
    > User-Agent: curl/7.54.0
    > Accept: */*
    > origin:http://domain.com
    >
    < HTTP/1.1 200 OK
    HTTP/1.1 200 OK
    < Server: openresty/1.9.15.1
    Server: openresty/1.9.15.1
    < Date: Thu, 12 Oct 2017 02:09:00 GMT
    Date: Thu, 12 Oct 2017 02:09:00 GMT
    < Content-Type: image/png
    Content-Type: image/png
    < Content-Length: 48794
    Content-Length: 48794
    < Connection: keep-alive
    Connection: keep-alive
    < x-nos-request-id: 3803f51c-d7be-4bf5-be04-1c458586a7e0
    x-nos-request-id: 3803f51c-d7be-4bf5-be04-1c458586a7e0
    < x-nos-owner-productid: fb5a131804d540458edb9e6dd93d95eb
    x-nos-owner-productid: fb5a131804d540458edb9e6dd93d95eb
    < Access-Control-Allow-Origin: http://domain.com
    Access-Control-Allow-Origin: http://domain.com
    < Access-Control-Max-Age: 86400
    Access-Control-Max-Age: 86400
    < Access-Control-Allow-Methods: HEAD
    Access-Control-Allow-Methods: HEAD
    < ETag: "86465340aad62e57f505b9ef973ce08a"
    ETag: "86465340aad62e57f505b9ef973ce08a"
    < Last-Modified: Thu, 12 Oct 2017 02:05:38 GMT
    Last-Modified: Thu, 12 Oct 2017 02:05:38 GMT
    
    <
    * Connection #0 to host neteasefile1.nos-eastchina1.126.net left intact

看到有 Access-Control-Allow-Origin: http://domain.com 则表示成功了。 如果是浏览器进行测试,可以使用火狐,打开设置了跨域规则的「对象存储」内的资源后,在页面中右键选择「查看元素」,打开「web 控制台」,点击控制台的「重新加载」,选择加载的图片,点击后在「消息头」中点击「编辑和重发」。

输入 origin:http://domain.com 后,点击发送后查看对应的请求头可以看到对应的响应头中有对应的头信息。