Postmanでオリジン間リソース共有 (CORS)のテストを行う

ブラウザには同一生成元ポリシーという制約があり、クロスオリジンリソースへのアクセスができません。Postmanでは、クロスオリジンリクエストを模擬して、テストを行うことができます。本文では、Postmanでオリジン間リソース共有 (CORS)のテストが簡単に行える方法を皆さんに紹介します。

オリジン間リソース共有 (CORS)とは

CORS(Cross-Origin Resource Sharing)とは、ウェブブラウザーにおける同一生成元ポリシー(Same-Origin Policy)の例外を設定する仕組みです。

同一生成元ポリシーとは、Webサイトの機能上の制限で、あるウェブサイトが別のドメインやポート番号のリソースにアクセスすることを制限するセキュリティ機能です。これにより、マルウェアサイトがユーザーのプライバシーを侵害したりデータを盗んだりすることを防いでいます。

しかし、時にはWebサイト間で適切にリソースを共有する必要があります。そこでCORSが登場します。CORSを使えば、サーバー側で適切な設定を行うことで、特定の別オリジンからのリソースアクセスを許可できます。

CORSの仕組み

1. ブラウザがクロスオリジンHTTPリクエストを送信する
2. サーバが適切なCORSヘッダをレスポンスに付加して、そのリクエストを許可するかどうかを示す
3. ブラウザはレスポンスヘッダに基づいてリソースにアクセスするかどうかを判断する

CORSはAjax通信などで頻繁に利用されるため、Webアプリケーションを開発する上で非常に重要な概念となっています。

Postmanとは

Postmanは、API（Application Programming Interface）開発とテストのための人気のあるツールです。Postmanを使用すると、開発者はHTTPリクエストを作成し、APIエンドポイントに送信することができるので、APIの動作をテストしたり、リクエストとレスポンスのデータを確認したりできます。

初心者向け：Postmanの基本的な使い方を

Postmanは、APIテストなどを行うための定番のツールになります。API戦略を実施する場合は、Postmanを利用することで、その効率性を大幅に向上できます。そこで、本文では、基本的なPostmanの使い方を皆さんに紹介して、Postmanを全く使ったことがないユーザーでも、本文の内容を参照して、Postmanを使いこなすことができると思います。

Apidogブログ - 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が適切に設定されているかを確認するのに有効です。本番環境ではブラウザでの動作確認も必要ですが、開発の過程ではこうしたツールを活用するメリットがあります。