文档中心 对象存储 操作指南 对象存储跨域访问设置
在这篇文章中:

    对象存储跨域访问设置

    跨域访问相关描述

    1. 什么是跨域

    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

    广义的跨域:
    1.资源跳转: A链接、重定向、表单提交
    2.资源嵌入:<link>、<script>、<img>、<frame>’等dom标签,样式中background:url()、@font-face()等文件外链
    3.脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

    通常所说的跨域是狭义的,是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

    3. 什么是同源策略

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指协议,域名,端口都要相同,其中有一个不同都会产生跨域。

    同源策略限制以下几种行为:

    1.Cookie、LocalStorage 和 IndexDB 无法读取
    2.DOM 和 Js对象无法获得
    3.AJAX 请求不能发送

    例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制

    常见场景举例:

    3. 跨域访问示例

    假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jquery的异步请求)

    1
    2
    3
    4
    $(function (){
        $.get("http://localhost:82/api/values", {},function (result) {
              $("#show").html(result);
      })});

    从错误信息可以看出以上出现了跨域问题!

    解决方案

    可以利用S3Browser来实现单通跨域设置,使用S3 Browser方法请参考:通过S3 Browser实现对象存储资源的创建和使用

    1. 打开S3Browser,通过endpoint,AK,SK登录

    2. 选中要配置跨域访问的桶,右键选择”CORS configuration”配置

    3. 将以下请求配置加入其中,确认即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <CORSConfiguration>
    <CORSRule>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <ExposeHeader>x-amz-id-2</ExposeHeader>
    </CORSRule>
    </CORSConfiguration>