上一篇文章主要讲述了结合 charles 的 Map Remote 功能和 Mock app 来实现跨域接口测试,本篇文章主要介绍引起跨域的原因及 mockapp 配合 charles 解决该问题的原理。
引起跨域的原因
当前页面与所请求的页面出现协议、域名、端口号任意一个不同时,即产生了跨域。
解决办法
通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,可以解决跨域问题。
Access-Control-Allow-Origin 常见值有访问的域名及 “ * ”两种。显示访问的域名则代表该域名可访问,显示 “ * ”代表所有域名可访问,例如:
1、Access-Control-Allow-Origin:http://a.com
代表只有 http://a.com 这个域名可访问
2、Access-Control-Allow-Origin: *
代表所有域名可访问
mockapp配合charles解决问题的原理
前一篇文章提到“使用 charles 进行接口测试时,Breakpoints 和 MapLocal 都无法很好地实现跨域接口测试”。具体原因是 Breakpoints 需要每次修改,不太方便;MapLocal 无法更改返回值的响应头。
而mockapp之所以可以配合charles解决跨域问题的接口测试,主要因为mock app在本地搭建了一个服务器,并且在被请求时可以加上允许跨域的响应头。
参考链接
HTTP访问控制(CORS)