通过资源共享为 Blob 存储设置 Cors 不起作用 - “被 Cors 策略阻止”

Question

尝试运行 axios 调用以获取文件会导致控制台出现以下错误：

“从源 'Origin Url' 访问 'Request Url' 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不存在 'Access-Control-Allow-Origin' 标头在请求的资源上。”

如上所示，我已将 Allowed origin、Allowed headers 和 Exposed headers 设置为 *. 我还将允许的方法设置为 GET 和 Max age 为 200（秒）。

我已经使用 Postman 设置了一个处理请求的 .Net Core 项目，我已经验证了请求是否正常。然而，在我的 React 项目中，由于 COR 的原因，它不是。这是两个请求：

响应请求：（返回 Cors 错误）

邮递员请求：（成功 - 200 响应）

我知道出于安全目的使用 * 是很糟糕的，我打算在确认我尝试实现的功能的基本功能后更改它。话虽如此，我该如何设置 Azure Blob Storage Cors，以便我可以从 React 进行 axios 调用以获取文件数据？

Answer 1

您可以通过调用Set Blob Service Properties、Set File Service Properties、Set Queue Service Properties 和Set Table Service Properties，为每个 Azure 存储服务单独设置 CORS 规则。为服务设置 CORS 规则后，将评估来自不同域的针对服务的正确授权请求，以确定是否根据您指定的规则允许该请求。

设置 Blob 服务属性 操作设置存储帐户的 Blob 服务终结点的属性，包括 Storage Analytics、CORS（跨域资源共享）规则和软删除设置的属性。

注意：所有存储帐户类型都支持 CORS，但高级性能层中的通用 v1 或 v2 存储帐户除外。

CORS 规则是在服务级别设置的，因此您需要分别为每个服务（Blob、文件、队列和表）启用或禁用 CORS。默认情况下，每个服务都禁用 CORS。要启用 CORS，您需要使用 2013-08-15 或更高版本为 Blob、队列和表服务，或版本 2015-02-21 或文件服务设置适当的服务属性。

这是单个 CORS 规则的示例，通过 Set Service Properties 操作指定：

<Cors>
    <CorsRule>  
        <AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>  
        <AllowedMethods>PUT,GET</AllowedMethods>  
        <AllowedHeaders>x-ms-meta-data*,x-ms-meta-target*,x-ms-meta-abc</AllowedHeaders>  
        <ExposedHeaders>x-ms-meta-*</ExposedHeaders>  
        <MaxAgeInSeconds>200</MaxAgeInSeconds>  
    </CorsRule>  
<Cors>

更多详情请参考Document