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

クロスオリジンアクセスとは、自身のソース（異なるドメイン名、プロトコル、またはポート）とは異なるソースを持つリソースをリクエストすることです。

ブラウザはセキュリティ上の理由から同一オリジンポリシーを設定しており、これはスクリプト内からのクロスオリジンリクエストを制限します。しかし、実際にはクロスオリジンアクセスは頻繁に発生します。そのため、W3C はクロスオリジンに関する標準ソリューションであるクロスオリジンリソース共有 (CORS) を提供しており、これは安全なクロスオリジンリクエストとデータ転送をサポートします。

ブラウザは CROS リクエストを次の 2 つのタイプに分類します。

シンプルリクエスト
プリチェックリクエスト：承認されていないリクエストによってリソースが変更されるのを防ぐための保護メカニズムです。ブラウザは、サーバーがクロスオリジンリクエストを許可するかどうかを確認するために、実際の OPTIONS メソッドでリクエストを送信する前にプリチェックリクエストを送信します。クロスオリジンリクエストが許可されていることが確認されると、実際の HTTP リクエストが開始されます。

シンプルリクエスト

シンプルリクエストは、次の条件を満たします。

リクエストメソッドは、次のいずれかです。
- HEAD
- GET
- POST
HTTP ヘッダー情報には、以下のフィールド以外は含まれていません。
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
Content-Type の値は、以下のタイプ以外ではありません。
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded

プリチェックリクエスト

シンプルリクエストの条件を満たさないすべてのリクエストについて、実際の通信の前に、プリチェックのために OPTIONS リクエストがトリガーされます。この種のリクエストはプリチェックリクエストです。

プリチェックリクエストは、リクエストヘッダーに添付されたサーバーにいくつかの正式な情報を送信します。これには主に以下が含まれます。

Origin：リクエストソース情報。
Access-Control-Request-Method：後続のリクエストのリクエストタイプ（POST、GET など）。
Access-Control-Request-Headers：後続のリクエストの明示的なヘッダーリスト。

プリチェックリクエストを受信した後、サーバーはヘッダーに添付された情報に基づいてクロスオリジンリクエストを許可するかどうかを決定し、レスポンスヘッダーを通じて対応する情報を返します。

Access-Control-Allow-Origin：クロスオリジンオリジンリストを許可します。
Access-Control-Allow-Methods：クロスオリジンメソッドリストを許可します。
Access-Control-Allow-Headers：クロスオリジンヘッダーリストを許可します。
Access-Control-Expose-Headers：公開されているヘッダーリストを許可します。
Access-Control-Max-Age：ブラウザの最大キャッシュ時間（秒単位）。
Access-Control-Allow-Credentials：Cookie の送信を許可するかどうか。

ブラウザは、返された CORS 情報に基づいて、実際のリクエストの送信を続行するかどうかを決定します。上記の操作はブラウザによって自動的に行われ、サーバーは特定の CORS ルールを構成するだけで済みます。

CORS のサポート

MGS は CORS ルールを構成する機能を提供しており、これにより業務システムは特定のクロスオリジンリクエストを許可するかどうかを決定できます。ルールは appId + workspaceId のディメンションで構成されます。

CORS の構成

mPaaS コンソールにログインし、次の手順を実行します。

左側のナビゲーションバーで、モバイルゲートウェイサービス をクリックします。
ゲートウェイの管理機能スイッチ タブページで、タブをクリックして CORS を構成します。

CORS を有効にすると、現在のワークスペース内のアプリケーションのすべての API サービスは、次の構成に一致するクロスオリジンリクエストをサポートします。

許可されるオリジン：Access-Control-Allow-Origin、複数のオリジンがサポートされており、カンマで区切られます。ワイルドカード文字「*」がサポートされています。
許可されるメソッド：Access-Control-Allow-Methods、複数のメソッドがサポートされています。
許可されるヘッダー：Access-Control-Allow-Headers、複数のヘッダーがサポートされており、カンマで区切られます。ワイルドカード文字「*」がサポートされています。
公開されるヘッダー：Access-Control-Expose-Headers、複数のヘッダーがサポートされており、カンマで区切られます。ワイルドカード文字「*」はサポートされていません。
有効期間：Access-Control-Max-Age、ブラウザの最大キャッシュ時間（秒単位）。
クレデンシャルを許可：Access-Control-Allow-Credentials、Cookie の送信を許可するかどうか。

クロスオリジンリクエスト

クロスオリジン API リクエストには、X-CORS-${appId}-${workspaceId} リクエストヘッダーを追加する必要があります。プリチェックリクエストがゲートウェイに到着すると、ゲートウェイは Access-Control-Request-Headers 内の X-CORS-${appId}-${workspaceId} を解析して appId と workspaceId を取得し、対応する CORS 構成を取得します。ゲートウェイクロスオリジンリクエストのヘッダーには、次の情報が含まれている必要があります。

X-CORS-\${AppId}-\${WorkspaceId}：この部分は必須です。プレースホルダーを実際の AppID と WordspaceId に置き換えます。
Operation-Type
WorkspaceId
AppId
Content-Type
Version

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

説明

CORS の許可されるヘッダーについては、実際の状況に応じて「*」を追加または設定してください。

シンプル リクエスト

プリチェック リクエスト

CORS のサポート

CORS の構成

クロスオリジン リクエスト

シンプルリクエスト

プリチェックリクエスト

クロスオリジンリクエスト