CORS

CORS (クロスオリジンリソース共有) 標準は、サーバの HTTP ヘッダーを指定することで、Web ブラウザを使用してデータを参照することが許可される発信元のセットを指定します。 GET (および場合によっては POST) 以外の HTTP メソッドに対して、この仕様では、ブラウザが要求の​ プリフライト ​を行うことが規定されています。これは、HTTP OPTIONS 要求を使用してサーバからサポート対象メソッドを取得することです。サーバが承認すると、ブラウザは実際の要求を HTTP OPTIONS 要求を使用して送信します。サーバは、要求と共に Cookie や HTTP 認証トークンなどのログイン情報を送信するようにクライアントに通知することもできます。

要求のプリフライトを行うには、次の CORS 仕様に従って Mule アプリケーションの応答ヘッダーを設定します。

「ユーザエージェントは、CORS API 仕様で定義された API に応答ヘッダーを公開する前に、単純な応答ヘッダーであるか、項目名が Access-Control-Expose-Headers ヘッダー (存在する場合) のいずれかの値に一致する ASCII (大文字と小文字を区別する) である場合以外のすべての応答ヘッダーを除外する必要があります。」

リソースは、単純なメソッドと単純なヘッダー以外で処理の対象となるメソッドとヘッダーを指定し、ログイン情報をサポートするかどうかを指定します。単純な要求を実行すると、アプリケーションが設定したヘッダー (単純な要求ヘッダー以外) が返されます。Mule アプリケーションにヘッダーが設定されていない場合は、何も返されません。CORS ポリシーにヘッダーを追加することは、返すことができるヘッダーをホワイトリストに登録することと同等です。

CORS ポリシーの適用

CORS ポリシーを適用する手順は、次のとおりです。

  1. API のバージョン番号をクリックします。

  2. API ダッシュボードで、[Policies (ポリシー)] をクリックします。

    適用されているポリシーのリストが表示されます。

  3. [Apply New Policy (新規ポリシーを適用)]。

  4. [Select Policy (ポリシーの選択)] で、[Cross-Origin Resource Sharing (クロスオリジンリソース共有)] を選択し、[Configure Policy (ポリシーの設定)] をクリックします。

  5. これが公開リソースの場合は、[Apply (適用)] をクリックします。そうでない場合は、[Public Resource (公開リソース)] をオフにします。

    [Default (デフォルト)] グループを指定するまで新しいグループを指定できません。デフォルトグループは、デフォルトの通常の意味の代替ではありません。この場合のデフォルトグループは、単に CORS 用に設定された最初のグループのことです。

  6. ログイン情報を使用した要求を実行するには、​[Support credentials (ログイン情報をサポート)]​ をクリックします。詳細は、Mozilla の​ 「Request with credentials (ログイン情報を使用した要求)」 ​を参照し、グループを指定してください。

    • [Default (デフォルト)] グループの [Origins (送信元)] で、1 つ以上のドメイン名 (​mulesoft.com​ など) を指定します。複数の名前はカンマで区切ります。

    • 必要に応じて、[Access Control Max Age (アクセスコントロール最大保持時間)] を変更して、プリフライト要求をキャッシュできる時間を指定します。

    • [Methods (メソッド)] で、ポリシーによって制御するメソッドを選択します。

    • [Headers (ヘッダー)] で、必要に応じて、API が許可するクライアント要求のヘッダーをリストします。

    • [Exposed Headers (公開ヘッダー)] で、必要に応じて、クライアントがアクセスできる応答ヘッダーをリストします。

  7. [Apply (適用)] をクリックします。

CORS ポリシーの編集

CORS ポリシーの作成後、API ダッシュボードで [Actions (アクション)] > [Edit (編集)] をクリックして、ポリシーを編集します。

  1. 必要に応じて値を変更します。

  2. [Apply (適用)] をクリックします。

CORS ポリシーのトラブルシューティング

API の CORS を実装できない場合、到達不可能な API の別の解決策として、ブラウザで同一オリジン制限を無効に方法が考えられます。

ブラウザでの同一オリジン制限を無効化

これらの制限はブラウザごとに固有の方法で処理されます。ヒント、コツ、プラグインはインターネットで入手できます。

ブラウザのセキュリティ設定を変更した場合のセキュリティ上の潜在的な影響を理解していることを確認してください。ブラウザが悪意のあるスクリプトやその他の潜在的な脅威に対して脆弱になる可能性があるため、これらのオプションは、各自の Web ページでテストする場合にのみを使用してください。

Google Chrome (Mac OS X)

  • 新しいターミナルウィンドウを開き、​open -a Google\ Chrome --args --disable-web-security​ の行を貼り付けて ​Enter​ キーを押します。

Google Chrome (Windows)

  • 新しいコマンドプロンプトウィンドウを開き、Chrome 実行可能ファイル (Chrome.exe) の場所に移動し、​chrome.exe --disable-web-security​ の行を貼り付けて ​Enter​ キーを押します。

Internet Explorer

ドメイン間でデータソースにアクセスするオプションを有効にします。IE の一部のバージョンでは、このオプションは [インターネットのプロパティ] > [セキュリティ] タブ > [このゾーンのセキュリティのレベル] の [レベルのカスタマイズ] > [その他] > [ドメイン間でのデータ ソースのアクセス] にあります。

プロキシのバイパス

ファイアウォールを使用してインバウンド要求をブロックする環境で Anypoint Platform ツールを使用する場合、このセクションで説明する方法でプロキシをバイパスします。

API Console と API Designer のためのプロキシのバイパス

使用する API の API Designer に移動します。右側のペインで、API がファイアウォールの内側にあることを確認します。これによりプロキシをバイパスできます。

accessing your api behind a firewall e7a50

API Notebook のためのプロキシのバイパス

使用する API の API Notebook に移動します。クライアントを作成する初期コードセルで、次のコードの新しいコードセルを作成して、クライアントの新しいプロキシ設定を指定します。

API.set(client, 'proxy', false);

上の行で、​client​ は API.createClient() をコールしたときに使用したクライアントの名前を表します。たとえば次のようになります。

API.createClient(<name of client>, …​);

これらの 2 行を合わせた次の例では、新しいクライアントを作成し、デフォルトプロキシをバイパスします。

API.createClient('myClient', '+http://api-portal.anypoint.mulesoft.com/my-client/api/test-api/test.raml+');

API.set(myClient, 'proxy', false);

Was this article helpful?

💙 Thanks for your feedback!

Edit on GitHub