ServBayでWebサイトにCORS（クロスオリジンリソースシェアリング）を設定する

現代のWeb開発では、フロントエンドアプリケーション（通常は1つのドメインで動作）がバックエンドAPIや他のサービス（異なるドメインやポートで動作している可能性あり）へのアクセスを頻繁に必要とします。ブラウザの同一生成元ポリシーはデフォルトでこのクロスオリジンのリクエストをセキュリティ上の理由からブロックします。クロスオリジンリソースシェアリング（CORS）は、サーバーがどのオリジンからのアクセスを許可するかを宣言する標準的な仕組みであり、安全なクロスオリジン通信を実現します。

本記事では、ServBayのローカルWeb開発環境で、ServBayのユーザーインターフェースを使ってWebサイトのCORSを簡単に設定・有効化する方法を解説します。

CORSとは？

クロスオリジンリソースシェアリング（CORS） は、HTTPヘッダーを利用したメカニズムで、サーバーが自分自身以外のどのオリジン（ドメイン、プロトコル、ポート）からリソースの読み込みを許可するかを指定できます。Webページが自身とは異なるオリジンからリソースを取得しようとする際、ブラウザは「クロスオリジンHTTPリクエスト」を実行しますが、同一生成元ポリシーによりデフォルトではこれらのリクエストはブロックされます。CORSはサーバーとブラウザの間で安全なクロスオリジンリクエストかどうかを判断する手段を提供します。

なぜ開発者はCORSの設定が必要なのか？

バックエンドとフロントエンドを分離したアプリケーション（例：フロントエンドが app.servbay.demo、APIが api.servbay.demo）、またはフロントエンドからサードパーティAPIを呼び出す場合、同一生成元ポリシーによりこれらのクロスオリジンリクエストがブラウザでブロックされます。CORS設定を行うことで、サーバーに自分のフロントエンドからのアクセスを許可させ、同一生成元ポリシーが原因のリクエスト失敗を解決できます。

CORSの主要なHTTPレスポンスヘッダーを理解する

サーバーがクロスオリジンリクエストへ応答する際、特定のAccess-Control-*HTTPレスポンスヘッダーを付加します。ブラウザはこれらのヘッダー値に基づき、クロスオリジンリクエストの可否を判断します。ここではServBayで設定可能な主要なCORSパラメータ（即ちこれらのHTTPレスポンスヘッダー）を説明します。

1. Access-Control-Allow-Origin

   • 役割： 最も重要なCORSヘッダーで、どのオリジンがリソースへアクセスできるかを指定します（1つまたは複数のドメイン）。
   • 値例：
     • *：全てのオリジンからのリクエストを許可します。**重要：**便利ですが、* は本番環境ではセキュリティ上推奨されません（誰でもアクセス可能となるため）。
     • https://servbay.demo：特定のhttps://servbay.demoからのリクエストのみを許可。
     • https://servbay.demo https://api.servbay.demo：スペース区切りで複数オリジンを許可します。
   • 注意： クロスオリジンリクエストで Cookie や HTTP認証情報 を扱う場合（Access-Control-Allow-Credentials: trueを設定した場合）、Access-Control-Allow-Originを * に絶対できません。必ず具体的なオリジンを指定してください。

2. Access-Control-Allow-Methods

   • 役割： クロスオリジンで許可するHTTPメソッド (GET, POST, PUT, DELETE, OPTIONS等) を指定します。
   • 値例： GET, POST, PUT, DELETE, OPTIONS（カンマ区切りで指定）。
   • 注意： “単純リクエスト”ではない場合（例えばPUTやDELETEを使用、またはカスタムヘッダー付き）、ブラウザは事前にOPTIONSメソッドによる「プリフライトリクエスト（preflight request）」を送信します。サーバーはこのリクエストに上記ヘッダーを含めて応答する必要があり、OPTIONSを含めることが重要です。

3. Access-Control-Allow-Headers

   • 役割： クロスオリジンリクエスト時に許可するカスタムHTTPリクエストヘッダーを指定します。
   • 値例： Content-Type, Authorization, X-Requested-With（カンマ区切り）。
   • 注意： フロントエンドがデフォルトの“単純リクエストヘッダー”（Accept, Accept-Language, Content-Language, Content-Type（ただし値がapplication/x-www-form-urlencoded, multipart/form-data, text/plain））以外を使う場合、プリフライトリクエストが発生し、そのヘッダー名をここで明示する必要があります。

4. Access-Control-Allow-Credentials

   • 役割： クロスオリジンリクエストでCookie、クライアントSSL証明書、HTTP認証などの“認証情報”の利用を許可するかどうかを示します。
   • 値例： true または false
   • 注意： trueにする場合、上述の通りAccess-Control-Allow-Originは絶対にワイルドカード*にできません。さらにフロント（JavaScript）側でも xhr.withCredentials=trueやfetch(url, { credentials: 'include' })など、認証情報の送信を明示する必要があります。

ServBayでCORSを有効化し設定する方法

ServBayは直感的なUIで、各Webサイトごとに個別のCORS設定が可能です。以下は詳細な手順です。

1. ServBayを起動しサイト一覧を表示： ServBayアプリを起動し、メイン画面のサイドナビゲーションから「サイト」をクリックします。登録済みのローカルWebサイト一覧が表示されます。

2. CORS設定を行いたいサイトを選択： サイト一覧からCORSを有効化したい特定のWebサイトを見つけ、そのサイト名をクリックして詳細設定画面に進みます。

3. CORS設定を見つけて有効化： サイト設定ページ中央付近までスクロールし、「CORS」セクションを見つけます。CORSはデフォルトで無効です。隣のスイッチをクリックし、“オフ”から“オン”へ切り替えます。有効化後、設定項目が編集できるようになります。

4. Access-Control-Allow-Origin を設定： 「Access-Control-Allow-Origin」入力欄に、このサイトのリソースへアクセスを許可したい1つ以上のオリジンを入力します。複数指定はスペースで区切ります（例：https://frontend.servbay.demo https://anotherapp.servbay.demo）。本番環境で*の利用は避けてください。

5. Access-Control-Allow-Methods を設定： 「Access-Control-Allow-Methods」入力欄に、許可したいHTTPのメソッドをカンマ区切りで入力します（例：GET, POST, PUT, DELETE, OPTIONS）。ご利用アプリで必要なすべてのメソッドを含め、通常はプリフライトリクエストのためOPTIONSも加えてください。

6. Access-Control-Allow-Headers を設定： 「Access-Control-Allow-Headers」入力欄に、許可したいカスタムHTTPリクエストヘッダー名をカンマ区切りで入力します（例：Content-Type, Authorization, X-Custom-Header）。実際にアプリで利用するヘッダーのみ列挙してください。

7. Access-Control-Allow-Credentials を設定（任意）： クロスオリジンリクエストでCookieやHTTP認証情報を扱いたい場合は、「Allow-Credentials」スイッチをオンにします。重要： この機能を有効にした場合、4の Access-Control-Allow-Origin には絶対に* を使わないでください。

8. 設定を保存： すべてのCORS設定が完了したら、画面右下の「保存」ボタンを必ずクリックして変更を適用しましょう。ServBayがWebサーバー設定（CaddyやNginx）を自動更新するため、手動での再起動は不要です。

設定例

下記の画像は「ServBay Demo Website」でCORSを設定した例です。

この設定例では、以下の通りです。

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: 有効（true）

つまり、この2つのオリジン（https://frontend.servbay.demo・https://api.servbay.demo）からのリクエストのみ「ServBay Demo Website」へアクセス可能で、GET, POST, PUT, DELETE, OPTIONSが使え、Content-TypeやAuthorizationヘッダーも送信可能、さらにCookie等の資格情報も許可されます。

注意点およびベストプラクティス

• 安全を最優先： 開発・テスト環境ではAccess-Control-Allow-Origin: *が便利ですが、本番環境では必要なオリジンに限定してセキュリティを強化しましょう。
• プリフライトリクエスト： CORS問題のデバッグには、OPTIONSによるプリフライトリクエスト動作の理解が rất重要 です。サーバーが適切なヘッダーで応答しているか（ServBayから設定）を確認してください。
• ブラウザキャッシュ： ブラウザはCORSポリシーをキャッシュする場合があります。ServBayのCORS設定を変更後も問題が解決しない場合は、ブラウザキャッシュを消去するか、シークレットモードでテストしましょう。
• アプリ側のCORS： Laravel、Express.js、Spring Boot等のフレームワークにもアプリケーションレベルでのCORS設定機能があります。ServBayの方はWebサーバーレイヤー（Caddy/Nginx）で有効となり、通常はアプリより優先されます。複雑な場合は両方の設定を確認・調整してください。
• デバッグツール： ブラウザの開発者ツール（F12）内の「ネットワーク」タブでリクエスト・レスポンスヘッダーを確認し、CORS設定やエラー原因の特定に役立てましょう。

よくある質問（FAQ）

Q: 順を追ってCORSを設定したのに、クロスオリジンリクエストが失敗します。

A: 以下の順でご確認ください。

1. ブラウザのコンソールとネットワークタブ確認： 通常ブラウザはCORSエラーをコンソールに出力し、ネットワークタブで全ヘッダー値がチェックできます。Access-Control-Allow-Origin・Access-Control-Allow-Methods・Access-Control-Allow-Headers などが正しくセットされているか、リクエスト内容と一致しているか確認してください。
2. オリジンアドレス照合： Access-Control-Allow-Origin内のプロトコル、ドメイン、ポートが、フロントエンドアプリからのものと完全一致しているか再確認してください。
3. メソッド・ヘッダー確認： 利用したHTTPメソッドがAccess-Control-Allow-Methodsに含まれ、リクエストで使用したすべてのカスタムヘッダーがAccess-Control-Allow-Headersに含まれているか確認しましょう。
4. 資格情報の問題： Cookie等資格情報付きリクエストは、ServBayでAllow-Credentialsを有効にし、Access-Control-Allow-Originが*でないことを必ず確認。クライアント側（JS）でもwithCredentials = trueなど、資格情報オプションの設定が必要です。
5. プリフライトリクエスト： 非単純リクエストでは、ブラウザがOPTIONSプリフライトリクエストを送信します。サーバー（ServBay）が正しいCORSヘッダーで応答しているか確認してください。
6. ServBayで保存忘れ： ServBay設定変更後は「保存」ボタンを押して反映させてください。

Q: すべてのサイトに共通のCORSポリシーをグローバル設定できますか？

A: ServBayのCORS設定は各Webサイトごとに独立しています（柔軟性・安全性のため）。現時点でグローバルCORS設定機能はありません。同じポリシーを複数サイトで利用したい場合は、個別に設定いただく必要があります。

Q: ServBayはどのようにCORS設定を実現していますか？

A: ServBayはバックエンドにCaddyやNginxといったWebサーバーを使用しています。ServBayのUIでCORS設定を行うと、CaddyfileやNginx設定ファイルに自動で適用されます。これらの設定や再読込はServBay側が管理するため、手動でファイルを編集する必要はありません。

まとめ

ServBayの直感的なインターフェースを使えば、ローカル開発環境のWebサイトに簡単にCORSを有効化・設定でき、クロスオリジンアクセス問題を効果的に解決できます。Access-Control-Allow-Origin・Access-Control-Allow-Methods・Access-Control-Allow-Headers・Access-Control-Allow-Credentialsといった主要なヘッダーの意味と適切な設定を理解することが、セキュアかつスムーズなクロスオリジン通信の鍵です。本ガイドと注意点に従って、より効率的なローカルWeb開発を実現しましょう。