赛普拉斯XHR被打断但立即中止

Question

我有一个与API网关接口的React应用（CRA）。我检查了api，如果有公告，则显示该组件。

我的赛普拉斯测试正在尝试拦截页面API调用并将其替换为固定装置，因此它始终为true，然后我将检查组件是否在DOM中：

it.only('Show component if there is an announcement', () => {
    cy.server();
    cy.route(
      'GET',
      'THIS_IS_THE_API',
      'fixture:announcement.json',
    );
  });

灯具非常简单：

{
  "title": "Heading 2",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
}

在页面上调用API的函数是axios async / await调用。 Axios是在XHR之上构建的，因此不兼容性不应该成为问题。

运行测试时，XHR甚至在尝试执行任何操作之前就被中止。测试结果表明请求已被取消：

服务器端的CORS设置仍未设置，因此我使用的chrome禁用了DEV的安全性，但是即使在普通的浏览器上，它仍然需要一些时间才能出现CORS错误，甚至调用没有被终止。

这就像是测试因某种原因而停止运行，但是我阅读并尝试过的所有内容都表明我做得很好。我找不到单个教程或做任何其他不同的事情！