javascript - 使用 SAS key 直接从客户端上传到 Azure 存储

Question

我尝试直接从浏览器使用 SAS key 上传，因为要上传的文件可能非常大(500MB-1GB+)，而且我不希望它们通过 Azure 上托管的后端。

我正在关注this great post here但我一方面遇到了 CORS 问题，另一方面遇到了 403 错误。

CORS 错误

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:36923' is therefore not allowed access. The response had HTTP status code 403.

如您所见，我正在尝试让我的 ASP MVC 应用程序在本地运行，然后上传到 Azure 以进行测试。

收到 403 错误:

403 Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.

我生成 SAS URI(明年到期并具有写入权限)的方式如下:

// First I create the blob container
public static CloudBlockBlob CreateBlobContainer(string strContainer)
{
    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"].ToString());

    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    CloudBlobContainer container = blobClient.GetContainerReference(strContainer);

    container.CreateIfNotExists();

    CloudBlockBlob blockBlob = new CloudBlockBlob(container.Uri, new StorageCredentials(ConfigurationManager.AppSettings["AccountName"], ConfigurationManager.AppSettings["AccountKey"]));

    return blockBlob;
}

//Then I create a SAS key for that container
public static string GetSaSForBlobContainer(CloudBlockBlob blob, SharedAccessBlobPermissions permission)


    var sas = blob.GetSharedAccessSignature(new SharedAccessBlobPolicy()
    {
        Permissions = permission,
        SharedAccessStartTime = DateTime.UtcNow.AddMinutes(-5),
        SharedAccessExpiryTime = DateTime.UtcNow.AddYears(1),
    });

    return string.Format(CultureInfo.InvariantCulture, "{0}{1}", blob.Uri, sas);
}

//Above methods invoked as such
container = FileManager.CreateBlobContainer("supercontainer");
var sasUri = FileManager.GetSaSForBlobContainer(container, SharedAccessBlobPermissions.Write);

因此，我创建了一个容器，然后生成一个允许上传一年左右的 URI。

上面的 sasUri 最终会在 ASP MVC View 中公开，可供 JavaScript 逻辑访问。它是上面引用的博客文章的 baseUrl。

这是我的容器上的 CORS 设置:

为什么我会收到此 CORS 错误？另外，为什么会出现有关 Authorization header 的错误？

我认为使用 SAS URI 的想法是不必向客户端公开帐户名/ key 。

我错过了什么吗？

Answer 1

您链接的博客文章假设共享访问签名是在 blob 容器而不是 blob 上创建的，因为您实际上并不知道用户事先要上传的文件的名称。但是，在您的代码中，您在 blob 而不是 blob 容器上创建 SAS，这就是您收到 403 错误的原因。

要解决此问题，请更改您的 CreateBlobContainer 方法，并让它返回 CloudBlobContainer 类型的对象，而不是 CloudBlockBlob。然后，请更新您的 GetSaSForBlobContainer 并使其第一个参数的类型为 CloudBlobContainer，而不是 CloudBlockBlob。进行这些更改后，您应该不会再出现 403 错误。