XHR请求的代码失败-粘贴在控制台中时有效-然后失败的代码有效

Question

我在下面的代码中有此XHR请求。该请求失败，说明“ ...所请求的资源上没有'Access-Control-Allow-Origin'标头。”好了，这很明显而且很容易。但是在服务器上启用了CORS。这是奇怪的部分。如果我访问进行此调用的页面，它将失败，然后复制代码并将其粘贴到具有硬编码URL的控制台中，该调用成功并打印结果。然后，如果刷新页面，则代码突然起作用。如果我关闭页面并打开备份，URL会稍有变化，但其来源显然相同，则代码将失败。重复上述过程即可。就像将其粘贴在控制台中一样，即可将其解锁。

当我加载页面时，第一个失败的请求只有三个请求标头，“ Origin，Referer和User-Agent”，响应标头不包括Access-Control...标头，这是错误所指出的。当我将代码粘贴到控制台中时，请求标头超过三个，响应标头包含Access-Control...标头。然后，如果我刷新页面，代码将成功执行，并且与成功的控制台请求和响应标头匹配。下面的代码没有变化，都一样，服务器也没有变化。似乎初始调用没有由浏览器设置所有标头，并且响应标头不包括跨源访问标头。但是，为什么将代码粘贴到控制台中会起作用，同时又使控制台成功运行而又没有任何更改，同时又导致代码起作用呢？为什么将此代码粘贴到控制台中会得到与从应用程序运行不同的结果？

function getAvatarImage(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}
getAvatarImage(_viewModel.socialProfile.avatarUrl, function (imageData) {
    cropper.load(imageData, { blockPush: true }, function (error, slimObj) {
        if (error) GolfNow.Web.Utils.ConsoleError('onError:' + error);
    });
});