跨域资源共享

跨域访问是指请求一个与自身资源不同源(不同的域名、协议或端口)的资源。不同源可以是不同的域名、协议或端口。

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 配置。 image.png | left | 827x274image.png | left | 815x711

开启 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}-\${WorskapceId}:一定要有此请求头,并用实际的 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){}
  });
说明

CORS 配置中的 允许标头 配置,根据实际情况添加或者设置 “*”。

阿里云首页 移动开发平台 mPaaS 相关技术圈