IT技术 - 在 JavaScript 中捕获 Access-Control-Allow-Origin 错误 - 吾爱随笔录

在 JavaScript 中捕获 Access-Control-Allow-Origin 错误

IT技术 javascript xmlhttprequest cors

2021-01-28 03:49:41

我编写了一个不断返回 Access-Control-Allow-Origin 错误的函数。这对我来说实际上很好；我不想解决这个问题。我只是想抓住它，这样我就可以在我的程序中阅读它的消息。

导致抛出错误的所有代码都在我的 try 块中，我的 catch 块显示错误的字符串消息。但是，当我运行代码时，没有捕获到错误，并且错误在控制台中以红色显示。如何捕获此错误并存储其消息？

        try {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                if (this.status < 400 && this.status >= 300) {
                    console.log('this redirects to ' + this.getResponseHeader("Location"));
                } else {
                    console.log('doesn\'t redirect');
                }
            }

            xhr.open('HEAD', $scope.suggLink, true);
            xhr.send();
        } catch(e) {
            console.log('Caught it!');
            console.log(e.message);
        }

2个回答

虽然浏览器本身会将更详细的错误消息记录到控制台，但您无法从代码中访问它。见https://bugs.chromium.org/p/chromium/issues/detail?id=118096#c5：

出于安全原因，XHR 和 Fetch API 的错误细节不会暴露给 JavaScript。

就此处实际需要的规范而言，Fetch 规范定义了在发生错误时提供的“状态消息”的详细信息——即使使用 XHR 而不是 Fetch API（XHR 规范引用了 Fetch 规范））。对于浏览器阻止的任何网络错误或响应，Fetch 规范要求状态消息是“空字节序列”：

甲网络错误是其状态始终为0，一个响应状态消息总是空的字节序列，首标列表是总是空的，体始终为空，并且拖车总是空的。

所以你能从任何你能捕捉到的错误中得到的只是“TypeError: Failed to fetch”之类的。

如果您使用的是 XHR，则处理错误所需的只是onerror事件处理程序：

xhr.onerror = function() { console.log("Error occurred but I dunno what exactly.")}

使用 jquery： $.getJSON(sURL, function (json) { console.log('json from web-service ->', json); }) .fail(function() { console.log("error - could not get来自服务的 json 数据"); });

2021-03-15 03:49:41

遗憾的是，虽然这让我可以触发控制台消息，但它并没有让我阻止默认错误消息。换句话说，我要澄清的是，不仅 XHR 和 Fetch API 的错误细节没有暴露给 JS，而且我们也无法阻止它们显示。超级跛脚。

2021-04-01 03:49:41

针对 CORS 错误的上述 jquery 版本（sideshowbarker 的）解决方法：

let sURL = 'https://www.mocky.io/v2/5185415ba171ea3a00704eed';
$.getJSON(sURL, function (json)
{
    console.log('json from web-service ->', json);
})
.fail(function()
{
    console.log("error - could not get json data from service");
});

其它你可能感兴趣的问题

上一篇this.constructor.prototype -- 不能完全覆盖，但可以写个别props？下一篇为什么 Array.prototype.includes(searchElement) 的参数需要与数组元素的类型相同？