Cypress 9.6.0：cy.request返回响应体为ArrayBuffer的问题排查求助

这种情况我碰到过好几次，大概率是后端返回的响应头Content-Type不符合Cypress默认的解析规则，或者返回的内容格式和你预期的不匹配。下面给你拆解原因和对应的解决办法：

可能的原因 #

• 后端返回的Content-Type不是application/json或其他Cypress能自动解析的文本类型，比如返回了application/octet-stream，此时Cypress会默认把响应体当成二进制数据，以ArrayBuffer格式存储。
• 虽然后端实际返回的是JSON，但Content-Type头设置错误（比如写成text/plain或者拼写错误），导致Cypress没有自动将其解析为JSON对象。
• 极少数情况是后端返回的内容带有特殊编码，Cypress无法自动识别并解析。

解决办法 #

1. 先确认后端的响应头 #

打开浏览器开发者工具的Network面板，找到这个请求，查看Response Headers里的Content-Type字段，确认是否是正确的application/json; charset=utf-8。如果不对，优先让后端修正这个响应头——这是最根本的解决方式。

2. 手动指定responseType强制解析 #

如果暂时没法修改后端，你可以在cy.request里手动添加responseType配置，明确告诉Cypress你期望的响应类型：

Cypress.Commands.add('requestWrapped', ({ method, path, body }) => { 
  const token = window.sessionStorage.getItem('x-csrf') 
  cy.request({ 
    method, 
    url: `${Cypress.env('backendUrl')}/${path}`, 
    body, 
    headers: { 
      'X-CSRF-Token': token, 
      'Access-Control-Allow-Credentials': true, 
      'content-type': 'application/json; charset=utf-8', 
    },
    responseType: 'json' // 手动指定解析为JSON格式
  }).then((res) => { 
    console.log(res.body) // 现在应该是JSON对象了
  }) 
})

如果后端返回的是纯文本，也可以用responseType: 'text'，之后再手动转成JSON：

.then((res) => {
  const jsonBody = JSON.parse(res.body)
  console.log(jsonBody)
})

3. 手动解析ArrayBuffer为JSON #

如果上面的方法不生效，还可以手动把ArrayBuffer转换成字符串再解析：

.then((res) => {
  const decoder = new TextDecoder('utf-8')
  const jsonString = decoder.decode(res.body)
  const jsonBody = JSON.parse(jsonString)
  console.log(jsonBody)
})

额外小提示 #

你测试用例里的请求body有个小问题：{ name: xyz, id: 123-123 }里的xyz如果是字符串需要加引号，id: 123-123会被JS当成减法运算，应该写成id: "123-123"，不然会触发语法报错哦。

内容的提问来源于stack exchange，提问作者Mariusz S.