识别由于 CORS 问题导致的提取错误

Posted 2023-03-04

【中文标题】识别由于 CORS 问题导致的提取错误

【英文标题】：Identify fetch error as due to CORS issue

【发布时间】：2020-02-29 13:35:42

【问题描述】：

我想知道资源加载是否由于 CORS 错误而失败，因为我想使用我在服务器上设置的代理。除非绝对必要，否则我不想使用我的代理，因为会通过它传输大量额外数据。

当我这样做时：

fetch("https://some-resource-somewhere-that-a-user-has-provided")
    .then(response => 
      // do stuff with the response
    ).catch((e) => 
       // e === Error("TypeError: Failed to fetch")
    );

该错误非常无用（至少在 chrome 上），但控制台中有大红色文本为我提供了我需要的信息！

我该怎么说

TypeError: 获取失败

是 CORS 问题，还是其他负载问题？

【问题讨论】：

您是否尝试过浏览器以外的其他东西，例如邮递员，检查 api 是否按计划工作？

看看这是否有帮助：***.com/questions/19325314/…

如果浏览器由于与 CORS 相关的原因阻止您的前端代码访问响应，则浏览器将在 devtools 控制台中记录明确提及 CORS 的特定错误消息。因此，如果您在 devtools 控制台中没有看到任何提到 CORS 的错误消息，那么代码失败的原因与 CORS 无关。相反，它是网络问题、SSL 问题或其他问题。

@sideshowbarker - 请认真阅读整个问题！

@Darran Sweeney - 是的，端点可以工作，只是没有 Access-Control-Allow-Origin: * 响应标头。

【参考方案1】：

我想出了以下解决方案：

var xhttp = new XMLHttpRequest();
xhttp.onerror = function () 
  if (this.status === undefined || this.status === 0) 
    console.log('error due to CORS issue');
   else 
    console.log("** An error occurred during the transaction", this);
  

;
xhttp.open("GET", "https://***.com", true);
xhttp.send();

【讨论】：

太棒了，不过你能解释一下原因吗，你怎么知道这将永远是一个 CORs 问题？

在 CORS 中，执行点是客户端。所以我的假设是不会有任何可用的状态。