Mobile Platform as a Service：跨域資源共用

CORS

跨域訪問是指請求一個與自身資源不同源（不同的網域名稱、協議或連接埠）的資源。不同源可以是不同的網域名稱、協議或連接埠。

瀏覽器出於安全考慮設定了同源策略，限制了從指令碼內發起跨域請求。但在實際應用中，經常會發生跨域訪問。為此，W3C 提供了一個標準的跨域解決方案：跨域資源共用（Cross-Origin Resource Sharing，CORS），支援安全的跨域請求和資料轉送。

瀏覽器將 CORS 請求分為以下兩類：

• 簡單請求

• 預檢請求：防止資源被本來沒有許可權的請求修改的保護機制。瀏覽器會在發送實際請求之前使用 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：接下來的請求中包含的使用者顯式設定的 Header 列表。

服務端收到預檢請求後，會根據上述附帶的資訊判斷是否允許跨域，通過回應標頭返回對應的資訊：

• Access-Control-Allow-Origin：允許跨域的 Origin 列表。

• Access-Control-Allow-Methods：允許跨域的方法列表。

• Access-Control-Allow-Headers：允許跨域的 Header 列表。

• Access-Control-Expose-Headers：允許暴露的 Header 列表。

• Access-Control-Max-Age：最大的瀏覽器緩衝時間，單位：秒。

• Access-Control-Allow-Credentials：是否允許發送 Cookie。

瀏覽器會根據返回的 CORS 資訊判斷是否繼續發送真實的請求。以上行為都是瀏覽器自動完成的，服務端只需要配置特定的 CORS 規則。

網關對 CORS 的支援

網關提供了配置 CORS 規則的功能，讓業務方決定是否允許特定的跨域請求。該規則以 appId + workspaceId 維度配置。

配置 CORS

登入 mPaaS 控制台，完成以下步驟：

1. 在左側導覽列，點擊 移動網關 菜單。

2. 選擇 網關管理 標籤頁，點擊右側的 功能開關 標籤頁，進行 CORS 配置。

開啟 CORS 後，app 在該 workspace 下的所有 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 和 WorkspaceId 替換預留位置內容；

• 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){}
  });