JavaScript-SDK之如何实现快速开始-浏览器(一)?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

JavaScript-SDK之如何实现快速开始-浏览器(一)?

2017-10-19 09:34:52 1615 0


快速开始-浏览器


更新时间:2017-07-12 18:16:44
[backcolor=transparent] [backcolor=transparent] [backcolor=transparent] [backcolor=transparent]

下面介绍如何在浏览器中使用OSS JavaScript SDK来访问OSS服务,包括上传/下载文件和查看文件列表。

[backcolor=transparent]注意:云账号AccessKey拥有所有API访问权限,建议遵循阿里云安全最佳实践,在客户端不要使用会泄露配置的ak,所以请创建并使用STS方式(临时账号权限)给客户端授权。

STS场景说明: 临时账号权限(STS) 更多有关浏览器的使用请参考: 浏览器应用

Bucket设置


从浏览器中直接访问OSS需要开通Bucket的 CORS设置
  • 将allowed origins设置成 *
  • 将allowed methods设置成 PUT, GET, POST, DELETE, HEAD
  • 将allowed headers设置成 *
  • 将expose headers设置成 ETag

[backcolor=transparent]注意:请将该条CORS规则设置成所有CORS规则的第一条。



使用SDK


目前浏览器中不能直接进行Bucket相关的操作(例如list buckets, get/set bucket logging/referer/website/cors)。但是可以进行Object相关的操作(例如上传/下载文件,查看文件列表等)。

包含SDK


首先在html文件的<head>中包含如下标签: <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

通过new OSS.Wapper()来创建client,OSS.Wrapper提供了异步的接口,类似于callback的方式,在.then()中处理返回的结果,在.catch()中处理错误。

搭建STS Server 并从客户端获取临时授权信息


  1. 为账号开通STS服务,如果已开通可以跳过,开通STS请参见STS开通说明

  2. 借助STS的SDK或API应用专属的STS签名服务。为了方便大家快速理解,提供了三个语言的版本Demo程序供参考:

  • 在前端(浏览器)中向搭建的STS服务发起请求,获取STS临时授权信息。<script type="text/javascript">
    OSS.urllib.request("http://your_sts_server/",
                       {method: 'GET'},
                       function (err, response) {
    if (err) {
       return alert(err);
    }
    try {
       result = JSON.parse(response);
    } catch (e) {
       errmsg = 'parse sts response info error: ' + e.message;
       return alert(errmsg);
    }
    // console.log(result)
    })
    </script>


    查看文件列表
    <script type="text/javascript">
    OSS.urllib.request("http://your_sts_server/",
                          {method: 'GET'},
                          function (err, response) {
          if (err) {
            return alert(err);
          }
          try {
            result = JSON.parse(response);
          } catch (e) {
            return alert('parse sts response info error: ' + e.message);
          }
          var client = new OSS.Wrapper({
            accessKeyId: result.AccessKeyId,
            accessKeySecret: result.AccessKeySecret,
            stsToken: result.SecurityToken,
            endpoint: '<oss endpoint>',
            bucket: '<Your bucket name>'
          });
          client.list({
            'max-keys': 10
          }).then(function (result) {
            console.log(result);
          }).catch(function (err) {
            console.log(err);
          });
    });
    </script>




  • 取消 提交回答
    全部回答(0)
    相关问答

    170

    回答

    惊喜翻倍:免费ECS+免费环境配置~!(ECS免费体验6个月活动3月31日结束)

    豆妹 2014-10-29 17:52:21 232476浏览量 回答数 170

    145

    回答

    【新手入门】云服务器linux使用手册

    fanyue88888 2012-11-26 17:14:18 159509浏览量 回答数 145

    8

    回答

    OceanBase 使用动画(持续更新)

    mq4096 2019-02-20 17:16:36 340611浏览量 回答数 8

    119

    回答

    OSS存储服务-客户端工具

    newegg11 2012-05-17 15:37:18 301237浏览量 回答数 119

    22

    回答

    爬虫数据管理【问答合集】

    我是管理员 2018-08-10 16:37:41 148603浏览量 回答数 22

    24

    回答

    阿里云开放端口权限

    xcxx 2016-07-20 15:03:33 658391浏览量 回答数 24

    82

    回答

    OSS入门教程

    belle.zhoux 2014-07-07 17:14:27 158543浏览量 回答数 82

    251

    回答

    阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

    云代维 2014-02-14 15:26:06 309491浏览量 回答数 251

    24

    回答

    【精品问答】python技术1000问(1)

    问问小秘 2019-11-15 13:25:00 483663浏览量 回答数 24

    2

    回答

    区域选择帮助

    fanyue88888 2012-12-07 15:54:30 205491浏览量 回答数 2
    +关注
    3598
    文章
    840
    问答
    问答排行榜
    最热
    最新
    相关电子书
    更多
    JS零基础入门教程(上册)
    立即下载
    性能优化方法论
    立即下载
    手把手学习日志服务SLS,云启实验室实战指南
    立即下载