跨域访问是指请求一个与自身资源不同源(不同的域名、协议或端口)的资源。不同源可以是不同的域名、协议或端口。
浏览器出于安全考虑设置了同源策略,限制了从脚本内发起跨域请求。但在实际应用中,经常会发生跨域访问。为此,W3C 提供了一个标准的跨域解决方案:跨域资源共享(Cross-Origin Resource Sharing,CORS),支持安全的跨域请求和数据传输。
浏览器将 CORS 请求分为以下两类:
OPTIONS
方法发送一个预检请求,从而获知服务端是否允许该跨域请求。服务端确认允许后,才会发起实际的 HTTP 请求。请求满足如下所有条件,为 简单请求:
HEAD
GET
POST
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 规则的功能,让业务方自行决定是否允许特定的跨域请求。该规则以 appId + workspaceId 维度配置。
登录 mPaaS 控制台,完成以下步骤:
开启 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 配置。网关跨域请求的请求头中要包含如下内容:
$.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){}
});
}
在文档使用中是否遇到以下问题
更多建议
匿名提交