使用BrowserJS SDK与OBS服务交互时，必须将AK/SK暴露到前端，这样会存在安全问题。为避免该问题出现，可让后端生成临时签名URL给前端后，前端再与OBS交互。

比如：实现上传功能。

// 后端使用NodeJS SDK
// 引入obs库
const ObsClient = require('esdk-obs-nodejs');
// 初始化
const obsClient = new ObsClient({
    // 认证用的ak和sk硬编码到代码中或者明文存储都有很大的安全风险，建议在配置文件或者环境变量中密文存放，使用时解密，确保安全；本示例以ak和sk保存在环境变量中为例，运行本示例前请先在本地环境中设置环境变量AccessKeyID和SecretAccessKey。
    // 前端本身没有process对象，可以使用webpack类打包工具定义环境变量，就可以在代码中运行了。
    // 您可以登录访问管理控制台获取访问密钥AK/SK，获取方式请参见https://support.huaweicloud.com/usermanual-ca/ca_01_0003.html
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    //这里以华北-北京四为例，其他地区请按实际情况填写
    server: 'https://obs.cn-north-4.myhuaweicloud.com'
    
});
// 以下三个参数由前端传给后端，方便后端计算签名
// 桶名
const bucketName = 'bucketName';
// 对象名称
const objectKey = 'object';
// Http请求方法
const method = 'PUT'
// 计算签名URL，然后返给前端
const res = obsClient.createSignedUrlSync({ Method : method, Bucket : bucketName, Key: objectKey, Expires: 3600 });

// 前端拿到计算签名URL，向OBS发起Http请求
// 前端使用axios请求库 
const url = res.SignedUrl;
const file = document.getElementById('input[type=file]')[0].file
if (!file) {
   console.log('your file is undefined')
}
// 清除axios库默认加的headers
axios.defaults.headers.put = {};

axios.put(url, file)
  .then(res => console.log(res))
  .catch(err => console.error(err));

在使用该方案时可能会遇到跨域问题，请按照以下步骤依次排查问题：

未配置跨域，需要在控制台配置CORS规则，请参考配置桶允许跨域请求。
签名计算问题，请参考URL中携带签名排查签名参数是否正确，比如上述demo中，Axios的PUT方法会自动添加请求头，而后端生成的临时授权URL并没有参与计算，这个时候就会出现跨域问题，查看network标签查看相应的请求会出现403状态码，如下图所示。

父主题： FAQ

同意关联代理商云淘科技，购买华为云产品更优惠（QQ 78315851）

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家