AWS S3とCloudFrontを組み合わせて画像などのデータを配信する際に、CORSエラーが発生することがあります。
特に、Node.jsを直接実行する環境と、Apacheをプロキシとして利用する環境で挙動が異なる場合、解決策が見つけにくいことがあります。
この記事では、CORSエラーが発生する原因を整理し、ローカル環境と本番環境の違いを考慮した対策を紹介します。
CORSとは？
CORS（クロスオリジンリソース共有）とは、異なるドメイン間でのリソースのやり取りを制御する仕組みです。
ブラウザはセキュリティ上の理由から、異なるドメイン間でのリクエストに制限をかけます。
そのため、S3に保存された画像をCloudFront経由で取得する際に、適切な設定がないとCORSエラーが発生します。
CORSエラーの発生原因と対策
ローカル環境ではNode.jsを直接実行しているのに対し、本番環境ではApacheのプロキシを利用している場合、以下のような違いが原因でCORSエラーが発生することがあります。
S3のCORS設定の不足
S3のバケットには、CORSポリシーを設定する必要があります。
不適切な設定がされていると、必要なヘッダーが返されず、CORSエラーが発生します。
適切なS3のCORSポリシーの例
|
1 2 3 4 5 6 7 8 |
[ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "HEAD"], "AllowedOrigins": ["*"], "ExposeHeaders": ["ETag", "x-amz-meta-custom-header"] } ] |
この設定で、すべてのオリジンからのアクセスを許可し、必要なヘッダーを公開できます。
CloudFrontのキャッシュによる影響
CloudFrontはレスポンスをキャッシュするため、設定変更後も古いレスポンスが使われてCORSエラーが発生することがあります。
キャッシュを無効にする設定を適用することで、この問題を回避できます。
CloudFrontのキャッシュポリシーの設定手順
- AWS管理画面でCloudFrontを開く。
- 「キャッシュポリシー」のページで「キャッシュポリシーを作成」を選択。
- 以下のように設定：
- キャッシュの有効期限：すべて「0」に設定。
- ヘッダーのキャッシュ：
Originヘッダーを追加。
- オリジンリクエストポリシーを作成し、
Access-Control-Request-Headersなどを追加。 - 作成したポリシーをCloudFrontのビヘイビアに適用。
Node.js側のCORS設定の不足
Node.js（Express）を直接実行する場合、CORS設定を適切に行わないとエラーが発生します。
以下のように、corsミドルウェアを明示的に設定してください。
|
1 2 3 4 5 6 7 8 9 10 |
const cors = require('cors'); const express = require('express'); const app = express(); app.use(cors({ origin: '*', methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true, })); |
Apacheのプロキシ設定の影響
本番環境でApacheをプロキシとして利用している場合、ApacheがCORSに必要なヘッダーを自動的に追加している可能性があります。
ApacheのCORS設定の例（.confファイル）
|
1 2 3 4 5 |
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule> |
ローカル環境でもApacheを使うことで、本番と同じ挙動を再現しやすくなります。
まとめ
- S3のCORS設定を適切に設定する
- CloudFrontのキャッシュを無効化し、レスポンスが更新されるようにする
- Node.js側でCORSヘッダーを適切に設定する
- Apacheのプロキシを利用する環境では、Apacheの設定も確認する
これらの対策を実施することで、AWS S3とCloudFrontを使った環境で発生するCORSエラーを解決できます。
環境ごとの違いを理解し、適切な設定を行うことが重要です。
コメント