使用 Azure 存储 JavaScript 客户端库为浏览器创建共享访问签名时出错答案

【问题标题】：Error in using Azure Storage JavaScript client library for browsers to create Shared Access Signature from使用 Azure 存储 JavaScript 客户端库为浏览器创建共享访问签名时出错
【发布时间】：2018-07-29 19:58:49
【问题描述】：

我需要在客户端应用程序中创建 blob 部分，这将使最终用户能够将图像上传到 Azure 存储帐户。

我已经创建了一个具有容器级别权限的容器“测试”，从下面的链接开始：

New Azure Storage JavaScript client library for browsers - Preview

我创建了一个简单的 HTML 页面，并按指定的顺序包含了 Azure 库。代码如下：

<html>
<head>

<title>Media Upload</title>
<script src="azure-storage.common.js"></script/>
<script src="azure-storage.blob.js"></script/>

</head>
<body style="word-wrap: break-word;">

<input type="text" id="text" name="text" value="Hello World!" />
<button id="upload-button" onclick="uploadBlobFromText()">Upload</button>


<script>
function uploadBlobFromText() {
     // your account and SAS information
     var sasKey ="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
     var blobUri = "https://XXXXXXXXX.blob.core.windows.net"; //tried with http as well.
     var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());
     alert("service ready");    
         var text = document.getElementById('text');
         var btn = document.getElementById("upload-button");
         blobService.createBlockBlobFromText('test', 'myblob', text.value,  function(error, result, response){
             if (error) {
                 alert('Upload failed, open browser console for more detailed info.');
                 console.log(error);
             } else {
                 alert('Upload successfully!');
             }
         });
    }
}
</script>
</body>
</html>

我收到以下错误：

Status code: 404, description: 'The specified resource does not exist

不知道为什么会失败，有人可以帮忙吗？

谢谢。

【问题讨论】：

标签： javascript azure azure-storage

【解决方案1】：

您应该在代码中实现 CORS。

在没有 CORS 的情况下，使用 Windows Azure 存储服务的网站需要充当存储调用的代理。

CORS for Blob 的典型用法是允许针对 Windows Azure 存储帐户直接上传 Web 浏览器文件。在这种情况下，用户可以使用 CORS 和 SAS（共享访问签名）身份验证机制，以便向您的存储帐户授予 Web 浏览器写入权限。

用于将 Blob 上传到 Windows Azure 存储的示例 JavaScript 代码：

下面的示例是一个代码 sn-p，它允许您使用 JavaScript 将文件直接从 Web 浏览器上传到 Windows Azure 存储。完整代码可在此处获得。下面的代码是 UploadImage.cshtml 文件中的一个 sn-p。

// Method uploads a blob to Azure Storage by using a Blob SAS URL.
    // The Web Browser will add the necessary CORS headers and issue a preflight request if needed.
    // blobSasUrl: Blob SAS URL already obtained through an Ajax call to own service
    // fileDataAsArrayBuffer: an ArrayBuffer (Byte Array) containing the raw data of the file to be uploaded
    function uploadImage(blobSasUrl, fileDataAsArrayBuffer) {
        var ajaxRequest = new XMLHttpRequest();
    
        // Once the image is successfully upload, we will call render Image that would show the uploaded image
        ajaxRequest.onreadystatechange = function() {return renderImage(ajaxRequest, blobSasUrl)};
    
        try {
            // Performing a PutBlob (BlockBlob) against storage
            ajaxRequest.open('PUT', blobSasUrl, true);
            ajaxRequest.setRequestHeader('Content-Type', 'image/jpeg');
            ajaxRequest.setRequestHeader('x-ms-blob-type', 'BlockBlob');
            ajaxRequest.send(fileDataAsArrayBuffer);
        }
        catch (e) {
            alert("can't upload the image to server.\n" + e.toString());
        }
    }

更多信息可以找到here

【讨论】：