CORS

CORS は、Web サイトが個人データで悪事を働くのを防ぐための技術です。ほとんどのブラウザと JavaScript ツールキットは CORS をサポートしているだけでなく、それを強制するため、Swagger をサポートする API サーバーに影響を与えます。

CORS については、こちらで読むことができます: http://www.w3.org/TR/cors。

CORS サポートに関して、アクションが不要なケースは2つあります。

Swagger UI がアプリケーション自体と同じサーバー (同じホスト*および*ポート) でホストされている場合。
アプリケーションが、必要な CORS ヘッダーを有効にするプロキシの背後にある場合。これは、すでに組織内で対応されている可能性があります。

それ以外の場合、CORS サポートは以下のために有効にする必要があります。

Swagger ドキュメント。Swagger 2.0 の場合、swagger.json/swagger.yaml および外部参照されているすべてのドキュメント。
Try it now ボタンを機能させるには、API エンドポイントでも CORS を有効にする必要があります。

CORS サポートのテスト

CORS サポートは、以下の3つの方法のいずれかで確認できます。

API を Curl で実行し、ヘッダーを調べます。例えば、

1
$ curl -I "https://petstore.swagger.io/v2/swagger.json"
2
HTTP/1.1 200 OK
3
Date: Sat, 31 Jan 2015 23:05:44 GMT
4
Access-Control-Allow-Origin: *
5
Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS
6
Access-Control-Allow-Headers: Content-Type, api_key, Authorization
7
Content-Type: application/json
8
Content-Length: 0

これにより、ペットストアのリソースリストが OPTIONS をサポートし、次のヘッダー: Content-Type、api_key、Authorization をサポートしていることがわかります。

ファイルシステムから Swagger UI を試して、デバッグコンソールを見てください。CORS が有効になっていない場合、次のような表示になります。

1
XMLHttpRequest cannot load http://sad.server.com/v2/api-docs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Swagger UI はこのエラー状態を簡単に表示できません。

https://www.test-cors.org の Web サイトを使用して CORS サポートを確認します。Access-Control-Allow-Headers が利用できない場合でも成功の結果が表示されますが、これは Swagger UI が正しく機能するために依然として必要であることに注意してください。

CORS の有効化

CORS を有効にする方法は、アプリケーションをホストするために使用するサーバーやフレームワークによって異なります。https://enable-cors.org では、いくつかの一般的な Web サーバーで CORS を有効にする方法に関する情報を提供しています。

その他のサーバー/フレームワークでは、それぞれのユースケースで CORS を有効にする方法に関する情報が提供されている場合があります。

CORS とヘッダーパラメータ

Swagger UI を使用すると、ヘッダーをパラメータとしてリクエストに簡単に送信できます。これらのヘッダーの名前は、CORS 設定でもサポートされている*必要*があります。上記の例から、

1
Access-Control-Allow-Headers: Content-Type, api_key, Authorization

これらの名前を持つヘッダーのみが Swagger UI によって送信されることが許可されます。