CORSとは？Web開発者が知っておくべきクロスオリジンの仕組みと実装方法

CORS（Cross-Origin Resource Sharing）は、Web開発において、異なるオリジン間でリソースを共有するために不可欠な技術です。

通常、Webページのスクリプトは同一オリジンに限定されてリソースへアクセスしますが、CORSを活用することで、セキュリティを保ちながら他のサーバーとの通信が可能になります。

本記事では、CORSの仕組み、実装方法、そしてよくある問題点について解説します。

 CORSの基本とその必要性

 1. オリジンとは？

オリジンとは、URIスキーム、ホスト名、ポート番号の組み合わせで表される、リソースの所在情報のことです。

Webブラウザは、**SOP（Same-Origin Policy：同一生成元ポリシー）を適用し、セキュリティを高めるために、異なるオリジン間でのリソースアクセスを制限します。

たとえば、「https://a.example.com」から「https://b.example.com」に直接リクエストを送ることは、通常の設定ではできません。

 2. CORSの仕組み

CORSは、WebサーバーがHTTPヘッダーに特定の項目を追加することで、異なるオリジン間でのリソース共有を許可する技術です。

たとえば、XMLHttpRequestやFetch APIを使って「https://a.example.com」から「https://b.example.com」にアクセスする場合、サーバー側がCORSを設定することでアクセスが許可されます。

具体的には、クライアントからのリクエストにOriginヘッダーが含まれ、サーバーが許可する場合は、レスポンスにAccess-Control-Allow-Originヘッダーを追加して応答します。

 CORSの具体的な実装方法

1. 単純リクエスト

CORSには、比較的簡単な単純リクエストがあります。

このリクエストは、GET、POST、HEADのメソッドを使用し、特定のヘッダーとContent-Typeのみを許可します。

たとえば、以下のHTTPリクエストが送信された場合：

サーバー側がCORSを許可している場合、次のようなレスポンスが返されます：

このように、CORS設定によって指定されたオリジンからのアクセスが許可されます。

2. プリフライトリクエスト

単純リクエスト以外の複雑なリクエストには、プリフライトリクエストが事前に送信され、サーバー側がアクセス許可を確認します。

これは、DELETEメソッドや、カスタムヘッダーを含むリクエストなどに適用されます。

たとえば、次のようなプリフライトリクエストが送られます：

サーバーがこのリクエストを許可する場合、次のレスポンスが返されます：

これにより、クライアントは安心してDELETEリクエストを送信できるようになります。

 CORSの使用例と応用

 1. APIへのアクセス許可

CORSは、外部のAPIを使用する際にも非常に便利です。

たとえば、Webアプリケーションが外部APIからデータを取得する場合、CORSを使用して、APIサーバーが特定のオリジンからのリクエストを許可します。

これにより、開発者は異なるドメインにホストされたAPIを活用することができ、機能拡張が可能になります。

 2. 複数のドメインでのリソース共有

CORSは、複数のドメインにまたがるリソース共有を行うためにも使用されます。

たとえば、企業が複数のサービスを異なるドメインで提供している場合、それらのサービス間で情報を共有するためにCORSが設定されることがあります。

このようなシナリオでは、複数のオリジンを許可リストに登録することが重要です。

まとめ

CORSは、Web開発において異なるオリジン間でリソースを安全に共有するための重要な技術です。

正しい実装を行うことで、セキュリティを維持しながら外部リソースへのアクセスを柔軟に行えます。

特に、APIの利用やマルチドメイン環境でのリソース共有には不可欠な機能であり、プリフライトリクエストや単純リクエストの仕組みを理解することで、よりスムーズな開発が可能となります。

さらに参照してください：

Altキーとは？キーボード操作を効率化する修飾キーの使い方と応用