博客

启用阿里云对象存储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：*
        (其它选项默认即可。)

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

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