t-sanoブログ

メモです。マイペースにアウトプットします。

AJAXで署名付きURLの発行、S3アップロードをする際の注意点(CORS)

ubw.hatenablog.com

 前回、署名付きURLを発行し、S3にファイルを直接アップロードすることに成功した。 次のステップとして、署名付きURLを利用し、ブラウザからのファイルアップロードを試してみた。 formで署名付きURLに対してPUTする方法もあるのだが、今回はAJAXでファイルをアップロードした。
 しかし、素直にアップロードできるはずもなく、CORSで何回か躓いたので記録しておく。
 当たり前だが、下記について、CORSの設定が必要だった。

  • 署名付きURLを発行するサーバ(Rails5 APIモード)
  • S3バケット

署名付きURLを発行するサーバ(Rails5 APIモード)

下記のgemを利用する。

gem 'rack-cors'

initializerのcors.rbに許可するOriginを追加する。

S3バケット

利用するリクエストに応じて、CORSの設定を変更する必要がある。 例えば、PUTリクエストをする場合は、下記のような設定を追加する必要がある。

<AllowedMethod>PUT</AllowedMethod>

リクエストヘッダーにContent-Typeを含める場合は、下記のような設定を追加する必要がある。

<AllowedHeader>Content-Type</AllowedHeader>

どのような設定をすればよいかは、ブラウザの開発者ツールでリクエストの内容を確認すればわかる。

CORSの設定変更は、AWSコンソールからできる。