cypress route 拦截 zepto ajax 请求时候 response 返回 null 问题原因

原文链接：https://blog.jijian.link/2020-08-03/cypress-zepto-ajax-response-null/

 

如果你项目有如下几个巧合，大概率会发现一个 ajax 请求返回为 null 的 bug：

1. 如果你的项目是移动端项目，刚好使用了 zepto.js。

2. 还刚好使用了 $.ajax 发送 ajax 请求。

3. 刚好又使用了 cy.route。

问题原因

对比正常 network 请求会发现少了好几个字段，少的字段如下：

X-Cypress-Delay: 0
X-Cypress-Id: xhr10
X-Cypress-Matched: **/testCyPress*
X-Cypress-Response: %7B%22code%22:%22111111%22,%22info%22:%22%E6%88%90%E5%8A%9F%22%7D
X-Cypress-Status: 200

查看 zepto ajax 源码 会发现有这么一行代码： https://github.com/madrobby/zepto/blob/master/src/ajax.js#L254

xhr.setRequestHeader = setHeader // xhr = new window.XMLHttpRequest()

就这么一行代码，改变了 XMLHttpRequest 的默认的 setRequestHeader 方法，导致 CyPress 测试请求发送的 Request Headers 少了好几个字段，进而导致返回数据为 null

处理办法

删除源码中的 xhr.setRequestHeader = setHeader 即可。

如果使用的 CDN ，比如 https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js ，删除1465 行问题代码 xhr.setRequestHeader = setHeader 即可。