为什么在 Cypress 测试中 axios.post() 总是返回 401 错误?

阅读时长 3 分钟读完

背景

Cypress 是一个前端自动化测试工具,它使用了一些 Node.js 模块,包括 axios,于是我们在做测试时可以调用 axios 发送请求。但是,在使用 Cypress 进行测试时,我们有时会遇到一个奇怪的问题:使用 axios.post() 时,总是返回 401 错误。这个问题困扰了很多开发人员,那么到底是为什么呢?

分析

要搞清楚这个问题,我们需要先看一下 Cypress 是如何工作的。Cypress 是一个运行于浏览器内部的测试工具,在测试过程中,Cypress 会自动获取页面的 cookiesessionStorage 等身份信息,然后把这些信息加到每个请求的 Header 中,这样才能通过身份验证。

但是,axios 不是一个在浏览器内部运行的库,它是在 Node.js 环境中运行的,在运行时会与浏览器环境隔离。此外,使用 axios 发送请求时,它并不会自动加上 cookiesessionStorage 等信息,因此当我们使用 axios.post() 发送请求时,就会返回 401 错误,因为服务端认为我们没有正确的身份信息。

解决

那么要怎样才能在 Cypress 测试中使用 axios 发送请求并且能够通过身份验证呢?我们可以使用 Cypress 提供的 cy.request() 方法。cy.request() 是 Cypress 提供的方法,通过该方法发送请求,可以让请求自动加上 cookiesessionStorage 等信息,这样就能够通过身份验证。

下面是一个使用 cy.request() 发送 POST 请求的示例代码:

-- -------------------- ---- -------
------------
  ------- -------
  ---- ---------------------------------------
  ----- -
    --------- -----------
    --------- ----------
  --
  -------- -
    --------------- ------------------
  -
------------------ -- -
  -- -------
--

在这个示例代码中,我们使用 cy.request() 方法模拟了一个 POST 请求,并在请求中传入了 usernamepassword 参数,由于 cy.request() 方法会自动加上 cookiesessionStorage 等信息,因此,这个请求就可以通过身份验证了。

总结

在 Cypress 测试中使用 axios 发送请求是一件很常见的事情,但是由于 axios 需要手动添加身份信息,因此容易出错。建议大家在 Cypress 测试中使用 cy.request() 方法发送请求,这样可以自动添加身份信息,减少出错的概率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64aa0f5948841e989463f055

纠错
反馈