全部产品

跨域资源共享

更新时间:2020-06-04 14:50:15

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 | 827x274 image.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
  1. $.ajax({
  2. url: 'http://${mpaasgw_host}/mgw.htm',// 请填写网关地址
  3. headers: {
  4. 'X-CORS-${appId}-${workspaceId}':'1' // 一定要设置这个请求头
  5. 'Operation-Type':${operationType}, // 请填写 operationType
  6. 'AppId':${appId}, // 请填写 appId
  7. 'WorkspaceId':${worksapceId}, // 请填写 worksapceId
  8. 'Content-Type':'application/json',
  9. 'Version':'2.0',
  10. },
  11. type: 'POST',
  12. dataType: 'json',
  13. data: JSON.stringify(reqData),
  14. success: function(data){}
  15. });
  16. }
说明:CORS 配置中的 允许标头 配置,根据实际情况添加或者设置 “*”。