前端实现亚马逊AWS s3的跨域问题总结

在s3控制台中添加存储桶并设置 跨域配置 ， 测试环境直接开放*请求， 不然会跨域
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>HEAD</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
 </CORSRule>
</CORSConfiguration>

添加存储桶策略
{bucket}

然后配制请求区域， 默认是美国的区域， 在国内会比较慢
cn-northwest-1

fileChange (e) {
    
    let file = e.target.files[0]
          
    let accessKeyId = "xxxxxxxxxxxxxxxxxxxxxx"
    let secretAccessKey = "aaaxxxxxxxxxxxxxxxxxxxxx"
    // let objectKey = data.objectKey
    // let sessionToken = data.sessionToken;
 
    let s3 = new AWS.S3({
        'apiVersion' : '2006-03-01',
         'region' : 'cn-northwest-1',
         'accessKeyId' : accessKeyId,
         'secretAccessKey' : secretAccessKey
         // 'sessionToken' : sessionToken
    })

    var params = {
         Body: file,   // 实际的文件 blob
         Bucket: "{bucket}", 
         Key: file.name   // 文件名
    };

    s3.putObject(params, (err, data) =>{
         if (err) {
              console.log('失败');
              console.log(err, err.stack) // an error occurred
         } else {
              // successful response
              console.log('成功');
               //成功之后将获取的objectKey值来替换img的路径
              this.urlData = objectKey
              // console.log(data)
         }
    })

}

参考链接

https://blog.csdn.net/xr510002594/article/details/82972026

https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/user-guide/add-cors-configuration.html

https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/cors-troubleshooting.html

aws javascript 文档

http://docs.amazonaws.cn/en_us/AWSJavaScriptSDK/latest/index.html

后续会完善， 如有问题，加Q联系