移动开发平台mPaaS：跨域资源共享

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