启用阿里云对象存储OSS的“服务端签名后直传”后无法上传文件问题

  • Post author:
  • Post category:其他


启用阿里云对象存储OSS的“服务端签名后直传”后,测试文件上传功能,服务端签名数据能成功获取,详情如下:

{"msg":"success","code":0,"data":{"accessid":"L***t","policy":"ey***XX0=","signature":"EqsbPoxA/V***I=","dir":"2021-01-07/","host":"https://***.oss-cn-beijing.aliyuncs.com","expire":"1609993896"}}

但是,后续文件的上传操作却未执行。


问题原因

:src\components\upload\singleUpload.vue中beforeUpload(file)的policy()方法详情如下:

beforeUpload(file) {
   let _self = this
    return new Promise((resolve, reject) => {
        policy()
            .then(response => {
                console.log('返回的数据:', response)
                _self.dataObj.policy = response.data.policy
                _self.dataObj.signature = response.data.signature
                _self.dataObj.ossaccessKeyId = response.data.accessid
                _self.dataObj.key = response.data.dir + getUUID() + '_${filename}'
                _self.dataObj.dir = response.data.dir
                _self.dataObj.host = response.data.host
                resolve(true)
            })
            .catch(err => {
                reject(false)
            })
    })
}

policy()方法获取数据需要一个data对象。而OssController详情如下:

public Map<String, String> policy() {
......
Map<String, String> respMap = null;
......
return respMap ;
}

其返回值是一个Map类型,显然不是policy()方法所需要的。


解决办法

:修改OssController如下:

public R policy() {
......
Map<String, String> respMap = null;
......
return R.ok().put("data",respMap);
}

修改之后,再次测试,出现新的报错:

Access to XMLHttpRequest at 'http://***.oss-cn-beijing.aliyuncs.com/' from origin 'http://localhost:8001' has been blocked by CORS policy:  Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. upload.js?c0e8:599 POST http://***.oss-cn-beijing.aliyuncs.com/ net::ERR_FAILED


新问题原因:


浏览器直接将文件及下面的dataObj以post方式提交给对象存储,产生了跨域请求,在未进行跨域设置的前提下,该请求遭到拦截。

data() {
	  return {
	      dataObj: {
	          policy: '',
	          signature: '',
	          key: '',
	          ossaccessKeyId: '',
	          dir: '',
	          host: ''
	          // callback:'',
	      },
	      dialogVisible: false
	  }
	}


新问题解决办法:


参考阿里云官方文档

《服务端签名后直传》

中“代码示例”的

《Java》



《Python》



《PHP》



《GO》

的“步骤3:修改CORS”,详情节选如下:

客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则(CORS)的验证。因此需要为Bucket设置跨域规则以支持Post方法。
    1、登录OSS管理控制台。
    2、单击Bucket列表,之后单击目标Bucket名称。
    3、单击权限管理 > 跨域设置,在跨域设置区域单击设置。
    4、单击创建规则,配置如下:
        来源:*  (* 代表所有请求);
        允许Methods:POST;
        允许Headers:*
        (其它选项默认即可。)

设置完成后,测试上传成功。

至此,服务端签名后直传相关的主要问题已经解决。



版权声明:本文为shinyolive原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。