ウェブサイトに CORS（クロスオリジンリソースシェアリング）を設定する
CORS とは何ですか？
クロスオリジンリソースシェアリング（CORS）は、ブラウザのクロスオリジンリクエストの制限を緩和するための HTTP ヘッダーに基づくメカニズムです。簡単に言えば、あるウェブページ（例えば、example.com にあるページ）が異なるドメイン（api.example.net など）からリソースをリクエストしたい場合、ブラウザはデフォルトでそのリクエストをブロックします。これがブラウザの同一オリジンポリシーです。CORS は、サーバーがレスポンスに特定のヘッダーを追加し、ブラウザにどのオリジンのリクエストのアクセスを許可するかを伝えることを可能にし、安全にクロスオリジンアクセスを実現します。
なぜ CORS を使用する必要がありますか？
フロントエンドアプリケーション（例えば、app.example.com で動作している SPA）がバックエンド API（api.example.com など）からデータを取得する必要がある場合、CORS を使用する必要がある可能性が高いです。
CORS パラメータの詳細
以下は CORS でよく使われるパラメータとその役割です：
Access-Control-Allow-Origin:- 役割： リソースへのアクセスを許可するオリジンを指定します。
- 値：
*：任意のドメインからのリクエストを許可します（本番環境では推奨されません。なぜなら安全ではないため）。https://example.com：https://example.comからのリクエストのみを許可します。https://example.com https://www.example.net:https://example.comとhttps://www.example.netからのリクエストのみを許可します。
- 重要な注意点： リクエストに
Authorizationヘッダーが含まれている場合、Access-Control-Allow-Originは*に設定できず、具体的なドメインを設定する必要があります。そうしないとクロスオリジンリクエストが失敗します。
Access-Control-Allow-Methods:- 役割： 許可される HTTP メソッド（GET、POST、PUT、DELETEなど）を指定します。
- 値： 例：
GET, POST, PUT, DELETE, OPTIONS - 重要な注意点： リクエストにカスタムリクエストヘッダーが含まれていたり、
PUTまたはDELETEメソッドを使用している場合は、ここでOPTIONSメソッドを宣言する必要があります。そうしないと、ブラウザは最初にOPTIONSプレフライトリクエストを送信し、プレフライトリクエストのレスポンスに許可されたOPTIONSメソッドが宣言されていなければ、リクエストは失敗します。
Access-Control-Allow-Headers:- 役割： クライアントがリクエストで使用することを許可されているカスタム HTTP ヘッダーを指定します。
- 値： 例：
Content-Type, Authorization - 重要な注意点： リクエストにカスタムリクエストヘッダーが含まれている場合、ここで許可を宣言しなければ、ブラウザがリクエストをブロックします。
Access-Control-Allow-Credentials:- 役割： クロスオリジンリクエストでクッキーや HTTP 認証情報を持ち込むことを許可するかどうかを指定します。
- 値：
trueまたはfalse。 - 重要な注意点：
trueに設定されている場合、Access-Control-Allow-Originの値はワイルドカード*にはできません。
ServBay での CORS の有効化と設定
ServBay は、ウェブサイトの CORS 設定を簡単に行えるインターフェースを提供します。具体的な手順は以下の通りです：
- ウェブサイトを選択: ServBay のメインインターフェースの左側のナビゲーションバーで、「ウェブサイト」オプションをクリックします。 ウェブサイトのリストから CORS を設定したいウェブサイトを選択します。
- CORS 設定に進む: ウェブサイト設定画面で「CORS」セクションを見つけます。ServBay はデフォルトで CORS を無効にしているので、手動で CORS を有効にし、スライドスイッチを「オフ」から「オン」に切り替えます。
Access-Control-Allow-Originを設定:Access-Control-Allow-Origin 入力ボックスに、アクセスを許可するドメイン名を入力します。複数のドメインはスペースで区切ることができます。例：https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com。Access-Control-Allow-Methodsを設定:Access-Control-Allow-Methods 入力ボックスに、許可したい HTTP リクエストメソッドを入力します。例：GET, POST, PUT, DELETE, OPTIONS。Access-Control-Allow-Headersを設定:Access-Control-Allow-Headers 入力ボックスに、許可したいリクエストヘッダーを入力します。例：Content-Type, Authorization。Allow-Credentialsを有効にする（オプション）: クロスオリジンリクエストでクッキーや認証情報を持ち込むことを許可したい場合は、Allow-Credentials スライドスイッチを有効にします。このオプションを有効にする場合、Access-Control-Allow-Originの値はワイルドカード*に設定できないことに注意してください。- 設定を保存: 設定が完了したら、右下の「保存」ボタンをクリックして変更を適用します。
例
上記のスクリーンショットに基づいて、"ServBay Testing" ウェブサイトに設定された CORS は次のとおりです：
Access-Control-Allow-Origin:https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.comAccess-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONSAccess-Control-Allow-Headers:Content-Type, AuthorizationAllow-Credentials: 有効。
これは、上記のドメインからのリクエストが servbay.new ウェブサイトのリソースにアクセスでき、GET, POST, PUT, DELETE, OPTIONS メソッドを使用してリクエストを送信でき、同時に Content-Type および Authorization リクエストヘッダーとクッキー情報を持ち込むことができることを意味します。
注意事項
- セキュリティ: 本番環境では、
Access-Control-Allow-Originの値にワイルドカード*を使用しないようにしてください。 - キャッシュ: ブラウザは CORS レスポンスをキャッシュする可能性があるため、CORS 設定を変更した後は、ブラウザのキャッシュをクリアする必要があるかもしれません。
- コード設定: 場合によっては、ウェブサーバーの CORS 設定に加えて、コード内（Laravelなど）でも CORS を設定する必要があります。
- 複雑なシナリオ: より複雑なクロスオリジンのシナリオでは、CORS の他に JSONP やプロキシサーバーなどの技術を組み合わせる必要があるかもしれません。
これらの手順に従うことで、ServBay でウェブサイトの CORS を簡単に有効にし、設定することができ、クロスオリジンリクエストがスムーズに行えるようになります。
この文書が、ServBay の CORS 機能をより良く理解し、使用するのに役立つことを願っています。ご質問があれば、いつでもお知らせください。