前端實現亞馬遜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

後續會完善， 如有問題，加Q聯繫