TestCafe升级至2.4.0后Mock出现CORS错误求助

问题现象 #

升级后Mock请求触发CORS错误，OPTIONS请求返回200状态，但实际请求被浏览器拦截，控制台错误提示：

Access to XMLHttpRequest at 'http://localhost:54392/QrHot6VR5_HJPHVnKYb!a!0!s_REMOVED-FOR-CONFIDENTIALITY/https://REMOVED-FOR-CONFIDENTIALITY/ncs/v1/orders/50612391/disbursements/123' from origin 'http://localhost:54391' has been blocked by CORS policy: Request header field pragma is not allowed by Access-Control-Allow-Headers in preflight response.

翻译后错误内容：

从源地址 'http://localhost:54391' 访问目标XMLHttpRequest接口时被CORS策略阻止：预检响应的Access-Control-Allow-Headers字段未包含请求头pragma。

原因分析 #

TestCafe 2.x版本在转发请求时，默认携带了pragma请求头，但当前Mock响应的CORS头中未将该字段加入允许列表，导致浏览器校验预检响应后判定请求不符合CORS规则，拦截了实际请求。

解决方案 #

修改Mock的响应头配置，添加Access-Control-Allow-Headers字段，明确包含pragma及其他可能需要的请求头：

export function detailsMock(detailsMockData = {}) {
  return RequestMock()
    .onRequestTo(
      new RegExp(
        `^${env.API_URL}/orders/[0-9]+/disbursements/[0-9]+[\?disbursementId=[0-9]+]?$`
      )
    )
    .respond(detailsMockData, 200, {
      'access-control-allow-credentials': 'true',
      'access-control-allow-origin': `${env.BASE_URL}`,
      'access-control-allow-headers': 'pragma, cache-control, content-type' // 可根据实际请求头补充其他字段
    });
}

额外提示 #

由于配置了access-control-allow-credentials: true，Access-Control-Allow-Headers不能设为*，必须明确列出所有需要允许的请求头。如果不确定具体有哪些头，可以查看浏览器预检请求的Access-Control-Request-Headers字段，将其中的所有字段加入允许列表。

内容的提问来源于stack exchange，提问作者Seldon Stone