Azure 存储 Blob CORS 错误

Posted 2023-02-23

【中文标题】Azure 存储 Blob CORS 错误

【英文标题】：Azure Storage Blob CORS errors

【发布时间】：2021-07-09 07:12:59

【问题描述】：

我有一个 Azure 存储帐户（经典）并通过门户启用了 CORS：

现在我有一个 Flutter Web 应用 (PWA)，它需要从这个存储中获取一些图像，但它出现了 CORS 错误。

我还尝试了一个带有简单 jquery ajax 调用的测试网页，但我得到了同样的错误。 这是jquery代码：

$.ajax(
        url: 'https://xxxx.blob.core.windows.net/test.jpg',
        type: 'get',
        success: function(data, status) 
            console.log("Status: "+status+"\nData: "+data);
        ,
        error: function (result) 
            console.log(result);
                   
     );

错误信息是：

从源“https://zzz.azurewebsites.net”访问“https://xxxx.blob.core.windows.net/test.jpg”处的 XMLHttpRequest 已被 CORS 策略阻止：无“访问权限-请求的资源上存在 Control-Allow-Origin' 标头。

如何添加响应标头：access-control-allow-origin: *

谢谢。

【问题讨论】：

请尝试为允许的方法添加“OPTIONS”。

您能否编辑您的问题并包含您收到的确切错误消息。

我尝试为允许的方法添加“选项”。它不起作用。我将错误消息添加到问题中。谢谢。

您的 CORS 配置看起来不错。你能检查错误的HTTP状态码吗？我看到 AJAX 请求失败并显示其他状态代码，但显示此 CORS 错误。

HTTP 状态码是“CORS 错误”。

【参考方案1】：

正如chat 中所讨论的，您的 CORS 配置非常好。您遇到的问题是因为浏览器缓存了 CORS 设置。我们发现了两件事：

CORS 设置的最大使用期限设置为非常高的值（86400 秒），这会使浏览器缓存 CORS 设置的时间更长。删除 CORS 设置并使用较低的最大年龄值重新创建它以及删除浏览器缓存将解决该问题。

在第二个浏览器中尝试 AJAX 请求总是有帮助的，以防第一个浏览器缓存了 CORS 设置。

【讨论】：

禁用浏览器缓存（Chrome -> 开发工具 -> 网络选项卡 -> 禁用缓存）对此有所帮助。事实上，我最初设置了一个非常高的值，并且它被缓存了（一路上的某个地方）。一旦我禁用了 Chrome 缓存，它就立即起作用了。