PostmanでJavaScriptのCORSエラー「Access-Control-Allow-Originヘッダーが存在しません」が発生しないのはなぜ？

Webアプリケーションを開発していると、ブラウザから異なるオリジン（ドメイン）のサーバーにリクエストを送った際に、CORSエラーに遭遇することがよくあります。しかし、同じリクエストをPostmanなどのAPIツールから送ると、なぜか問題なく成功してしまいます。この挙動の違いには、いったいどのような理由があるのでしょうか。

問題の概要

現在表示しているページのURLと異なるオリジンのリモートサーバーに対してネットワークリクエストを送信すると、Webブラウザでは同一オリジンポリシー（Same-Origin Policy）により、CORSエラーが発生します。ところが、Postmanのようなツールを使って同じリクエストを送ると、このCORSエラーを回避できてしまうのです。

ここでは、Webブラウザ経由でリクエストした場合と、Postmanのような拡張機能・ツール経由でリクエストした場合で、なぜレスポンスの挙動が異なるのかを解説します。

解説：ブラウザとPostmanの違い

1. ブラウザはセキュリティ上の制限を受ける

Webブラウザから、自分のページが属するドメインとは別のドメインへネットワークリクエストを送信する場合、ブラウザはセキュリティ上の理由からそのリクエストをブロックします。多くの場合、サーバーにリクエストが到達することさえなく、ユーザーへの通知もほとんど行われません。同一オリジン内でのリクエストのみが、原則として許可されます。

これは、悪意のあるサイトがユーザーの意図せずに他サイトのデータへアクセスすることを防ぐための、重要なセキュリティ機構だからです。

2. Postmanなどのツールは同一オリジンポリシーの制約を受けない

一方、Postmanや類似のツールを使用する場合、このポリシーの制限を受けません。WebページはXMLHttpRequestオブジェクトやfetch APIを使ってリモートサーバーとデータの送受信を行えますが、これらは同一オリジンポリシーの制約下にあります。しかし、Postmanのような拡張機能やスタンドアロンツールには、この制限が適用されません。

つまり、拡張機能やデスクトップアプリケーションは、自身のオリジンの外にあるリモートサーバーとも自由に通信できるのです。これこそが、Postmanではリクエストが正常に完了する一方で、WebページではCORSエラーによって失敗する根本的な理由です。

まとめ

• ブラウザ： 同一オリジンポリシーにより、異なるオリジンへのリクエストはCORSヘッダーによる許可が必要。
• Postman： ブラウザのサンドボックス外で動作するため、CORS制限を受けずに任意のサーバーへリクエスト可能。

Postmanで動作するのにブラウザでは失敗するというケースに遭遇したら、それはコードのバグではなく、ブラウザのセキュリティ機構によるものだと理解しておくと良いでしょう。サーバー側で適切な「Access-Control-Allow-Origin」ヘッダーを設定することが、解決策となります。