CORS 错误 - 错误：禁止跨源 http://localhost - 仅在 ReactJS/Jest 测试中

Posted 2023-03-04

【中文标题】CORS 错误 - 错误：禁止跨源 http://localhost - 仅在 ReactJS/Jest 测试中

【英文标题】：CORS error - Error: Cross origin http://localhost forbidden - in ReactJS/Jest test only

【发布时间】：2020-03-06 05:04:15

【问题描述】：

我遇到了一个问题，我向外部 API 发出的请求在执行时工作正常，但是在运行 Jest/Enzyme 测试时它给了我一个 CORS 错误。有问题的函数是使用 API 中的 JsonRpc 实现，并使用 node-fetch 中的 fetch。不确定是否有我可以在某处应用的 CORS 设置？

我在 Jest/Enzyme 测试框架中尝试了多种异步等待，但仍然遇到问题。

test("it should do something", done => 
    const component = shallow(<CustomComponent />)
    component.instance().customAsyncFunction( result => 
      expect(result.length).toEqual(5)
      done()
    )
    // return component.instance().customAsyncFunction().then(data => 
    //   expect(data.length).toEqual(5)
    // )
  )

我尝试了上述方法和其他一些方法（如 setTimeout 和等待它）并得到了 CORS 错误。

我得到的结果是：

 console.error
 node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
   Error: Cross origin http://localhost forbidden
       at dispatchError (...\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:65:19)
       at Request.client.on.res (...\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:679:38)
       at Request.emit (events.js:198:13)
       at Request.onRequestResponse (...\node_modules\request\request.js:1066:10)
       at ClientRequest.emit (events.js:203:15)
       at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:556:21)
       at HTTPParser.parserOnHeadersComplete (_http_common.js:109:17)
       at TLSSocket.socketOnData (_http_client.js:442:20) undefined

有什么想法吗？

【问题讨论】：

你在浏览器中运行测试吗？因为 CORS 检查对于浏览器来说是典型的，但我相信对于 NodeJS 来说它不是预期的

【参考方案1】：

通过设置 testURL 选项，这是您在 jest 配置中想要的有效 URL 将解决此问题。

【参考方案2】：

假设您确实想在测试期间调用真正的 API 而不仅仅是模拟它，您需要确保服务器发送适当的“访问控制允许来源”标头（显然是执行的确切机制这取决于您的服务器平台）

【参考方案3】：

Jest 允许您设置设置脚本文件。该文件在其他所有内容之前都是必需的，它使您有机会修改运行测试的环境。这样，您可以在加载 axios 之前取消设置 XMLHttpRequest，并在提升导入后评估适配器类型。 链接：https://facebook.github.io/jest/docs/configuration.html#setuptestframeworkscriptfile-string

在 package.json 中

  ...,
  "jest": 
    ...,
    "setupTestFrameworkScriptFile": "./__tests__/setup.js",
    ...
  ,
  ...

__tests__/setup.js

global.XMLHttpRequest = undefined;

【讨论】：

我实际上是在使用 XMLHttpRequest。除此之外我还能做什么？

【参考方案4】：

1) 您可能正在寻找的是代替模拟 promise 或使用 jest.mock() 运行的任何函数，然后断言该模拟已被调用（使用正确的参数） Jest 测试是不应该真正与您的 API 对话的单元测试

2) 在测试模式下，您的 env var 很可能有一些东西，process.env.NODE_ENV 在开玩笑期间设置为“test”，这可能会改变某些东西，或者可能是您自己的自定义配置 env var 之一