AJAXで署名付きURLの発行、S3アップロードをする際の注意点(CORS)
前回、署名付き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コンソールからできる。