NodeJS fetch("https://www.google.com") 说“TypeError: NetworkError when trying to fetch resource”但它是 200

Question

我的 Firefox 开发者网络标签显示调用是 200，甚至显示了页面，但 fetch 和 axios 都说它因网络错误而失败。

axios 调用只是 ==>

    axios.get('https://www.google.com', {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD, OPTIONS, PATCH'
        }
    }).then((response) => {
        alert(response); 
    }, (error) => { 
            alert("error = " + error); 
    }); 

这一定很简单/愚蠢，但我就是想不通。 :-(

哦，是的。 Edge 做同样的事情。 . . .

（已编辑）更多细节

如果我在我的浏览器中添加一个 UNBLOCK CORS 扩展并且注释掉我的两个标题行，它就可以工作。使用标题行，它不起作用 - 所以它们一定是错误的，但我不明白如何。

即

axios.get('https://www.google.com', {
    headers: {
        // 'Access-Control-Allow-Origin': '*',
        // 'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, HEAD, OPTIONS, PATCH'
    }
}).then((response) => {

作品

有什么想法吗？

Answer 1

正如您已经发现的那样，问题在于这是一个跨域请求，并且只允许使用 CORS。

但是，您似乎误解了 CORS。

同源策略的全部意义在于人们不应该能够做您在这里尝试做的事情 - 在浏览器中从域 A 的页面向域 B 的页面发送请求。唯一的当B（不是A！）明确允许接收来自域A（或来自域*）的请求时例外。

因此，在您的情况下，Google（不是您）必须在 response 中发送这些标头，以便告诉浏览器允许此请求并且应该将结果返回到您的代码。当然，Google 并没有这样做，因此即使是 200，您也永远不会得到结果，因为浏览器会看到在 200 响应中缺少这些 CORS 标头。

在不依赖扩展来禁用此机制（除了要求 Google 为您的域添加例外 ?）的情况下，让您完成这项工作的唯一方法是通过您的服务器代理此请求。如果您的 服务器 将请求发送给 Google 而不是页面中的脚本，它当然会起作用，因为这是 浏览器 强制执行的策略，而服务器不是在浏览器内。因此，您必须向您的服务器发送一个请求，该服务器会将其转发给 Google，然后将来自 Google 的响应传递回您页面中的代码。

您似乎对发送请求的内容有些困惑：在您的问题标题中，您编写了“NodeJS”（这意味着已经从服务器发送它）但实际上您是从脚本发送请求在浏览器中（这很明显，因为您谈论 Firefox 网络选项卡，并且您使用 node.js 中不存在的alert，而且您谈论的是浏览器扩展），所以浏览器规则适用于您。

另见：

• https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9
• https://levelup.gitconnected.com/overview-of-proxy-server-and-how-we-use-them-in-react-bf67c062b929
• https://www.npmjs.com/package/cors-anywhere

---

注意：至于为什么使用 Unblock CORS 扩展并附加这些标头（而不是仅忽略标头）会失败，我不确定，但这不相关，因为在 request 这些标头充其量是无用的，最坏的情况是无效的。