## CloudFront で CORS プリフライト OPTIONS が通らないときの対応方法

### 目次

1. はじめに

2. CORS とプリフライトリクエストについて

   - 2-1. CORS の基本

   - 2-2. プリフライトリクエスト（OPTIONS メソッド）の役割

3. CloudFront の設定

   - 3-1. 基本的な CloudFront の振る舞い

   - 3-2. CORS 設定でよく見られる問題

4. CORS エラーのトラブルシューティング

   - 4-1. CloudFront での設定確認

   - 4-2. S3 またはオリジンの CORS 設定

5. 具体的な解決方法

   - 5-1. CloudFront のカスタムヘッダーの設定

   - 5-2. オリジンでの CORS 設定見直し

   - 5-3. OPTIONS メソッドの許可

6. テストと検証

   - 6-1. CORS エラーの再現と修正

   - 6-2. ブラウザとネットワークツールの活用法

7. エラーケースの例

   - 7-1. 実際のエラーメッセージと原因の分析

8. まとめ

### 1. はじめに

CORS（オリジン間リソース共有）は、ウェブブラウザが異なるオリジン間でリソースを安全に要求できるようにする重要なセキュリティ機能です。しかし、設定が不十分な場合、特に CloudFront を使用する際、CORS のプリフライトリクエストである OPTIONS メソッドが正しく通らないことがしばしばあります。本記事では、この問題を解決するための具体的な方法を解説します。

### 2. CORS とプリフライトリクエストについて

#### 2-1. CORS の基本

CORS は、異なるオリジン間で安全にリソースを共有し、ウェブアプリケーションがセキュリティ上の制限を超えて動作する必要がある場合に使用されます。具体的には、ブラウザがリソースを取得するためのリクエストをどのように扱うかを指定するヘッダーを備えています。

#### 2-2. プリフライトリクエスト（OPTIONS メソッド）の役割

プリフライトリクエストは、特に DELETE や PUT などの影響を与える可能性がある HTTP メソッドを使ったリクエストが行われる前に発行される確認のためのリクエストです。OPTIONS メソッドを用いて、ブラウザはリソースに対して対応する CORS 設定が行われているかを確認します。

### 3. CloudFront の設定

#### 3-1. 基本的な CloudFront の振る舞い

Amazon CloudFront は、エンドユーザーに近い場所でコンテンツをキャッシュし、配信します。この際、CORS の設定が適切に反映されていることが必要です。しかし、デフォルトの設定では、CORS リクエストが正しく処理されない場合があります。

#### 3-2. CORS 設定でよく見られる問題

CloudFront 経由のリクエストで CORS エラーが発生する主な原因として、オリジンサーバでの不適切な CORS 設定や、OPTIONS メソッドが許可されていないことが挙げられます。

### 4. CORS エラーのトラブルシューティング

#### 4-1. CloudFront での設定確認

まずは、CloudFront ディストリビューションの設定を確認し、CORS ヘッダーが正しく設定されているかを確認します。Origin から正しい CORS ヘッダーが返されているかどうかは、まずオリジンサーバにアクセスしてレスポンスヘッダーを確認します。

#### 4-2. S3 またはオリジンの CORS 設定

もし CloudFront が Amazon S3 をオリジンとして利用している場合、S3 バケットの CORS 設定も確認する必要があります。S3 の設定画面からバケット CORS 設定を確認し、必要に応じて編集します。

```json

[

  {

    "AllowedHeaders": ["*"],

    "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],

    "AllowedOrigins": ["*"],

    "ExposeHeaders": [],

    "MaxAgeSeconds": 3000

  }

]

```

### 5. 具体的な解決方法

#### 5-1. CloudFront のカスタムヘッダーの設定

CloudFront 上でカスタム CORS ヘッダーを設定できます。これにより、OPTIONS メソッドのクエリをクリアにするために必要な CORS ヘッダーをオリジンに伝播させます。

#### 5-2. オリジンでの CORS 設定見直し

オリジン側でも設定を見直すことが重要です。正しい CORS ポリシーが設定されているかを確認し、必要に応じて修正します。例えば、オリジンがパブリック API であれば、以下のような設定が想定されます：

```json

Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

Access-Control-Allow-Headers: Content-Type, Authorization

```

#### 5-3. OPTIONS メソッドの許可

また、OPTIONS メソッドが CloudFront のキャッシュ動作に影響されずに正しく処理されるよう、キャッシュ動作を確認し、必要であればルールを変更します。

### 6. テストと検証

#### 6-1. CORS エラーの再現と修正

問題を再現するために、コンソールのネットワークツールを活用し、CORS エラー発生時のリクエストとレスポンスを確認します。変更後に、同様の方法で再度リクエストを送信し、期待通りの結果が返るかをテストします。

#### 6-2. ブラウザとネットワークツールの活用法

Chrome DevTools や Firefox Developer Tools などを利用して、OPTIONS リクエストやレスポンスに注目します。ここでのヘッダー情報は、問題の発見および修正にとって重要です。

### 7. エラーケースの例

#### 7-1. 実際のエラーメッセージと原因の分析

特定のエラーケースとして、「No 'Access-Control-Allow-Origin' header is present on the requested resource」などのメッセージが見られることがあります。これは、オリジン側で適切なヘッダーが設定されていないことを示します。

### 8. まとめ

CloudFront を利用した CORS プリフライトリクエストの問題を解決するには、オリジンや CloudFront の設定を正しく理解し適用することが不可欠です。問題の起点となる部分を明確にし、適切な解決方法を実施することで、セキュア且つスムーズな CORS 対応が可能となります。設定変更後は、必ずテストを繰り返し、本番環境でも予期せぬエラーが出ないことを確認しましょう。

CloudFront で CORS プリフライト OPTIONS が通らないときの対応方法

目次

続きを読むには単価診断を受けてください（30秒）