クロスオリジンリソース共有 (CORS) - Mobile Platform as a Service

Web アプリから mPaaS ゲートウェイ API を呼び出す際にブラウザーコンソールで Cross-Origin Request Blocked エラーが表示される場合は、モバイルゲートウェイで CORS を有効にして、アプリのオリジンからのオリジン間リクエストを許可してください。

CORS の仕組み

ブラウザは、スクリプトが開始するクロスオリジンリクエストをブロックする同一オリジンポリシーを適用します。クロスオリジンリソース共有 (CORS) は、サーバーが他のオリジンからのリクエストを明示的に許可できるようにする W3C 標準です。

リクエストは、ターゲット URL がページ URL と次のいずれかの点で異なる場合、クロスオリジンと見なされます。

異なるドメイン (例: example.com から api.otherservice.com へ)
異なるサブドメイン (例: app.example.com から api.example.com へ)
異なるポート (例: example.com から example.com:8080)
異なるプロトコル (例: https://example.com から http://example.com へ)

CORS リクエストには、次の 2 つのタイプがあります。

単純リクエスト
プリフライトリクエスト: ブラウザは、実際のリクエストを送信する前に、OPTIONS メソッドを使用してプリフライトリクエストを送信し、サーバーがクロスオリジンリクエストを許可するかどうかを確認します。ブラウザは、サーバーからの許可が確認された後にのみ、実際のリクエストを送信します。

単純リクエスト

リクエストは、次のすべての条件を満たす場合、単純リクエストとなります。

リクエストメソッドが次のいずれかであること：
- HEAD
- GET
- POST
HTTP リクエストヘッダーに次のフィールドのみが含まれていること：
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- プラグマ
- DPR
- ダウンリンク
- Save-Data
- Viewport-Width
- 幅
Content-Type ヘッダーは、以下のいずれかの値です。
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded

プリフライトリクエスト

単純リクエストの条件を満たさないリクエストは、プリフライトをトリガーします。ブラウザはまず、以下のヘッダーを含む OPTIONS リクエストを送信します：

Origin：リクエストの送信元。
Access-Control-Request-Method: 後続のリクエストの HTTP メソッド (POST や GET など)。
Access-Control-Request-Headers: 実際のリクエストに含まれるヘッダー。

サーバーは、CORS ポリシーを含むレスポンスを返します。

Access-Control-Allow-Origin: クロスオリジンリクエストを許可するオリジン。
Access-Control-Allow-Methods: クロスオリジンリクエストに許可される HTTP メソッドです。
Access-Control-Allow-Headers: クロスオリジンリクエストで許可されるリクエストヘッダー。
Access-Control-Expose-Headers: ブラウザがアクセスできるレスポンスヘッダーです。
Access-Control-Max-Age：ブラウザーがプリフライトレスポンスをキャッシュできる期間 (秒単位)。
Access-Control-Allow-Credentials: ブラウザーがリクエストと共に Cookie を送信できるかどうか。

プリフライトが成功した場合、ブラウザは実際のリクエストを送信します。

CORS の設定

mPaaS Mobile Gateway では、appId と workspaceId の組み合わせごとに CORS ルールを設定し、許可するクロスオリジンリクエストを制御できます。

コンソールでの CORS の有効化

mPaaS コンソールにログインし、次の手順を実行してください。

左側のナビゲーションペインで、[Backend Service Management] > [Mobile Gateway] を選択します。
左側のナビゲーションペインで、[Mobile Gateway] を選択します。
[Gateway Management] タブ、次に [機能スイッチ] タブを選択して、CORS を設定します。

CORS を有効にすると、ワークスペース内のアプリケーションのすべての API サービスが、設定されたルールに一致するクロスオリジンリクエストを受け入れます。次のフィールドを設定します。

許可されたオリジン： Access-Control-Allow-Origin。カンマで区切って 1 つ以上のオリジンを指定します。ワイルドカード (*) も使用できます。
許可されたメソッド: Access-Control-Allow-Methods。1 つ以上の HTTP メソッドを指定します。
許可ヘッダー: Access-Control-Allow-Headers。 1 つ以上のリクエストヘッダーをカンマで区切って指定します。ワイルドカード (*) を使用できます。
公開ヘッダー: Access-Control-Expose-Headers。ブラウザがアクセスできる 1 つ以上のレスポンスヘッダーを、カンマで区切って指定します。ワイルドカード (*) は使用できません。
最大有効期間: Access-Control-Max-Age。ブラウザがプリフライトレスポンスをキャッシュする期間 (秒単位) です。
資格情報の許可: Access-Control-Allow-Credentials。ブラウザがクロスオリジンリクエストで Cookie を送信できるかどうかを示します。

クロスオリジンリクエストの送信

すべてのクロスオリジン API リクエストに X-CORS-${appId}-${workspaceId} ヘッダーを追加します。プリフライトリクエストがゲートウェイに到達すると、ゲートウェイは Access-Control-Request-Headers からこのヘッダーを解析して appId と workspaceId を取得し、正しい CORS 設定を検索します。

クロスオリジンゲートウェイリクエストには、次のヘッダーを含める必要があります。

X-CORS-${AppId}-${WorkspaceId}：必須。プレースホルダーを実際の AppId と WorkspaceId に置き換えてください。
Operation-Type
WorkspaceId
AppId
Content-Type
Version

次の例は、jQuery Ajax を使用したクロスオリジンリクエストを示しています。すべてのカスタムヘッダーは、CORS 設定の [許可されたヘッダー] にも記載する必要があります。

$.ajax({
    url: 'http://${mpaasgw_host}/mgw.htm', // ゲートウェイアドレスを入力します
    headers: {
      'X-CORS-${appId}-${workspaceId}': '1', // このリクエストヘッダーは必須です
      'Operation-Type': ${operationType}, // operationType を入力します
      'AppId': ${appId}, // appId を入力します      
      'WorkspaceId': ${workspaceId}, // workspaceId を入力します
      'Content-Type': 'application/json',
      'Version': '2.0',
    },
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(reqData),
    success: function(data){}
  });

説明

CORS 設定の [許可されたヘッダー] には、必要なヘッダーを追加するか、値を * に設定する必要があります。