ブラウザには同一生成元ポリシーという制約があり、クロスオリジンリソースへのアクセスができません。Postmanでは、クロスオリジンリクエストを模擬して、テストを行うことができます。本文では、Postmanでオリジン間リソース共有 (CORS)のテストが簡単に行える方法を皆さんに紹介します。
オリジン間リソース共有 (CORS)とは
CORS(Cross-Origin Resource Sharing)とは、ウェブブラウザーにおける同一生成元ポリシー(Same-Origin Policy)の例外を設定する仕組みです。
同一生成元ポリシーとは、Webサイトの機能上の制限で、あるウェブサイトが別のドメインやポート番号のリソースにアクセスすることを制限するセキュリティ機能です。これにより、マルウェアサイトがユーザーのプライバシーを侵害したりデータを盗んだりすることを防いでいます。
しかし、時にはWebサイト間で適切にリソースを共有する必要があります。そこでCORSが登場します。CORSを使えば、サーバー側で適切な設定を行うことで、特定の別オリジンからのリソースアクセスを許可できます。
CORSの仕組み
- ブラウザがクロスオリジンHTTPリクエストを送信する
- サーバが適切なCORSヘッダをレスポンスに付加して、そのリクエストを許可するかどうかを示す
- ブラウザはレスポンスヘッダに基づいてリソースにアクセスするかどうかを判断する
CORSはAjax通信などで頻繁に利用されるため、Webアプリケーションを開発する上で非常に重要な概念となっています。
Postmanとは
Postmanは、API（Application Programming Interface）開発とテストのための人気のあるツールです。Postmanを使用すると、開発者はHTTPリクエストを作成し、APIエンドポイントに送信することができるので、APIの動作をテストしたり、リクエストとレスポンスのデータを確認したりできます。
shimizu chioka
また、Postmanは、機能豊富なインターフェースを提供し、リクエストの作成や編集、ヘッダーの管理、パラメータの設定、レスポンスの確認などを行うことができます。
Postmanでオリジン間リソース共有 (CORS)のテストを行う
ブラウザには同一生成元ポリシーという制約があり、クロスオリジンリソースへのアクセスができません。しかし、Postmanはこのようなブラウザのセキュリティ制約を受けないので、自由にクロスオリジンリクエストを送信できます。それでは、どうやってPostmanでもブラウザの環境を模擬して、オリジン間リソース共有 (CORS)のテストを行えば良いのでしょうか？
ステップ⒈PostmanでHTTPリクエストを作成
Postmanを開き、HTTPリクエストを新規に作成して、GETやPOSTなどのリクエストメソッドを選択して、URLやパラメータなどの情報を記入します。
ステップ⒉クロスオリジンのフィールドを定義
「Headers」タブに切り替えて、「Origin」フィールドを記入した上、CORSのURLを記入します。例えば、localhost:8080を記入して、このフィールドは、ブラウザがクロスオリジンリクエストのOriginヘッダーを模擬します。
ステップ⒊クロスオリジンリクエストを送信
上記の設定が終わった上、Postmanで「Send」ボタンをクリックして、クロスオリジンリクエストを送信します。そして、レスポンスでヘッダー情報で「Access-Control-Allow-Origin」などのCORSに関する情報があるかどうかを確認しましょう。バックエンドのサーバーでCORSを正確に設定して、フロンドエンドのオリジンからのリクエストを許可します。
クロスオリジンのリクエストが成功したか不成功したかを問わず、スターテスコードも200になりますので、クロスオリジンが成功になっているかどうかを確認するために、ヘッダー情報を確認する必要があります。
成功したクロスオリジンリクエストは、レスポンスのヘッダーに必ず「Access-Control-Allow-Origin」が含まれています。
ApidogでCORSテストをより便利に行う
CORSテストをより便利に行うために、Apidogという便利なAPIクライアントを使うのがおすすめです。ApidogはAPI設計、ドキュメンテーション、テスト、モックサーバーにも全面的に対応可能なAPIツールとして、次のように、CORSテストを簡単に行うことができます。
ステップ⒈ApidogでHTTPプロジェクトを作成して、エンドポイントを作成します。リクエストHeaderで「Origin」というフィールドを記入して、クロスオリジンのURLを入力します。
ステップ⒉設定が終わると、実行ページでリクエストを送信して返されたレスポンスのHeaderタブを確認します。ここで「Access-Control-Allow-Origin」などの情報があれば、クロスオリジンが成功になっています。
まとめ
本記事では、Postmanを使ってCORSのテストを行う方法について説明しました。CORSとは、ウェブブラウザーの同一生成元ポリシーの例外を設定する仕組みです。Webサイト間で適切にリソースを共有する際に重要な概念となります。また、Postmanではブラウザの制約を受けないため、自由にクロスオリジンリクエストを送信してCORSをテストできます。
Apidogは、Postmanよりも便利なAPIクライアントツールになりますので、このツールを使えば、CORSテストをより便利に行えるので、ぜひご活用ください。
総じていえば、Postmanを使ったCORSテストは、開発中のAPIやWebサーバーに対してCORSが適切に設定されているかを確認するのに有効です。本番環境ではブラウザでの動作確認も必要ですが、開発の過程ではこうしたツールを活用するメリットがあります。
