AWS S3とCloudFrontで発生するCORSエラーの原因と対策

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ポリシーの例

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "HEAD"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": ["ETag", "x-amz-meta-custom-header"]
    }
]

この設定で、すべてのオリジンからのアクセスを許可し、必要なヘッダーを公開できます。

CloudFrontのキャッシュによる影響

CloudFrontはレスポンスをキャッシュするため、設定変更後も古いレスポンスが使われてCORSエラーが発生することがあります。
キャッシュを無効にする設定を適用することで、この問題を回避できます。

CloudFrontのキャッシュポリシーの設定手順

1. AWS管理画面でCloudFrontを開く。
2. 「キャッシュポリシー」のページで「キャッシュポリシーを作成」を選択。
3. 以下のように設定：
   • キャッシュの有効期限：すべて「0」に設定。
   • ヘッダーのキャッシュ：Originヘッダーを追加。
4. オリジンリクエストポリシーを作成し、Access-Control-Request-Headers などを追加。
5. 作成したポリシーをCloudFrontのビヘイビアに適用。

Node.js側のCORS設定の不足

Node.js（Express）を直接実行する場合、CORS設定を適切に行わないとエラーが発生します。
以下のように、corsミドルウェアを明示的に設定してください。

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ファイル）

<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を使うことで、本番と同じ挙動を再現しやすくなります。

まとめ

これらの対策を実施することで、AWS S3とCloudFrontを使った環境で発生するCORSエラーを解決できます。
環境ごとの違いを理解し、適切な設定を行うことが重要です。

• Original:https://minory.org/aws-cors-error.html
• Source:minory
• Author:管理者