HerokuでAWSS3の署名付きURLアップロードを正しく設定するにはどうすればよいですか？

敬意を表する

問題

ユーザーが画像/ビデオをアップロードして表示できるHerokuで実行されている単純なアプリケーションがあります。署名付きURLを使用しようとしています。私はこのチュートリアルとこれを試しました。実際、私はGithubリポジトリのクローンを作成しました。問題は、画像をアップロードしようとすると、次のエラーが発生することです。

[エラー]プリフライト応答が成功しません

[エラー]アクセス制御チェックのため、XMLHttpRequestをロードできません（長いリンク）。

[エラー]リソースの読み込みに失敗しました：プリフライト応答が成功しません（img.jp2、0行目）

特定の質問

AWSの経験があまりないので、S3バケットのセットアップに問題があるのではないかと思います。だから私の質問は、この問題の原因とそれを修正するにはどうすればよいですか？

これが私のCOR設定です

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

署名付きURLを生成するコードは次のとおりです

aws.config.region = 'us-west-1';
BUCKET = process.env.S3_BUCKET;

app.get('/account', (req, res) => res.render('account.html'));

app.get('/sign-s3', (req, res) => {
  const s3 = new aws.S3();
  const fileName = req.query['file-name'];
  const fileType = req.query['file-type'];
  const s3Params = {
    Bucket: S3_BUCKET,
    Key: fileName,
    Expires: 60,
    ContentType: fileType,
    ACL: 'public-read'
  };

  s3.getSignedUrl('putObject', s3Params, (err, data) => {
    if(err){
      console.log(err);
      return res.end();
    }
    const returnData = {
      signedRequest: data,
      url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
    };
    res.write(JSON.stringify(returnData));
    res.end();
  });
});

これがS3にアップロードしようとするコードです

function uploadFile(file, signedRequest, url){
  const xhr = new XMLHttpRequest();
  xhr.open('PUT', signedRequest);
  xhr.onreadystatechange = () => {
    if(xhr.readyState === 4){
      if(xhr.status === 200){
        alert('success')
      }
      else{
        alert('Could not upload file.');
      }
    }
  };
  xhr.send(file);
}

何が試されたか

追加する

<AllowedMethod>OPTIONS</AllowedMethod>

結果は

Found unsupported HTTP method in CORS config. Unsupported method is OPTIONS

その他の注意事項

クロームとサファリを試しました。誤ってデフォルトで使用していたことが判明しました

 <AllowedHeader>authorization</AllowedHeader>

これをに戻す

 <AllowedHeader>*</AllowedHeader>

結果：

[Long link] Failed to load resource: the server responded with a status of 403 (Forbidden)

敬意を表する

Herokuチュートリアルでは、いくつかの詳細が省略されています（または更新する必要があります）。

構成を更新する必要がありました：

aws.config.region = 'us-west-1';
aws.config.update({
  accessKeyId:  process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]