代码之家 › 专栏 › 技术社区 › alan samuel

使用Javascript上载到Azure blob存储失败?

azure-blob-storage azure javascript

-1

alan samuel · 技术社区 · 8 年前

我按照本教程将视频上载到blob存储- https://dmrelease.blob.core.windows.net/azurestoragejssample/samples/sample-blob.html#step1

我已经完成了所有这些操作,包括启用CORS。目前,我已将CORS设置为启用*最长周期。

但我还是

Failed to load resource: the server responded with a status of 400 (Bad Request)
:9000/#/:1 Failed to load https://XXXXXX.blob.core.windows.net/3d7959e4-a48d-447b-a919-

    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:9000' is 
therefore not allowed access. The response had HTTP status code 400.

两天前我让它工作了,但它突然停止了工作。

下面是我的javascript,介绍我是如何调用的。

var blobUri = 'https://XXXXXX.blob.core.windows.net/';
            var sastoken = 'XXXXXX';
            var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, sastoken);

            var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
            blobService.singleBlobPutThresholdInBytes = customBlockSize;

            var customediaid = mediaid;

            //Guid
            //Wrong guid here- create a proper one
            var customazureid = guid + ".mp4";

            var finishedOrError = false;
            var speedSummary = blobService.createBlockBlobFromBrowserFile(
                customediaid,
                customazureid,
                file,
                { blockSize: customBlockSize },
                function (error, result, response) {
                    finishedOrError = true;
                    if (error) {
                        console.log(error);
                        alert('Failed look console');
                    } else {
                      alert('Success - Check folder named -' + mediaid + "with filename - " + customazureid + '.mp4');
                      UpdateDatabase(mediaid, azuremediaid);

                    }

                }
            );

像这样为存储帐户启用我的cors。

ALLOWED ORIGINS ALLOWED METHODS ALLOWED HEADERS EXPOSED HEADERS MAX AGE
* GET,HEAD,POST,PUT,OPTIONS,MERGE,DELETE * * 2147483647

此外,在教程网站中,您可以使用SAS令牌和存储帐户列出所有容器。当我添加这些字段时,也可以这样做。它只是在我的网站上不起作用。

编辑

不确定这是否有用,但下面是通过使用postman工具捕获请求的样子。

https://XXXXX.blob.core.windows.net/02b8be3e-22b7-41fc-a1d3-831153f8de90/97d603e4-767d-ddc2-169a-379db3af7419.mp4?comp=block&blockid=Njc4YTA4Nz

Request Headers
    Accept:*/*
    Accept-Encoding:gzip, deflate, br
    Accept-Language:en-US,en;q=0.9
    Access-Control-Request-Headers:content-type,x-ms-client-request-id,x-ms-date,x-ms-version
    Access-Control-Request-Method:PUT
    Connection:keep-alive
    DNT:1
    Host:XXXXXXX.blob.core.windows.net
    Origin:http://localhost:9000
    User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

我得到的回应是-

    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 403.

1 回复 | 直到 6 年前

Bruce Chen 8 年前

根据您的描述,我刚才在azure blob存储中重用了您的代码,如下所示:

<script type="text/javascript" src="https://brucchstorage.blob.core.windows.net/scripts/azurestoragejs-0.2.8-preview/azure-storage.blob.js"></script>
<script type="text/javascript">
    function uploadfile() {
        var blobUri = 'https://brucchstorage.blob.core.windows.net';
        var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, 'st=2018-04-04T21%3A41%3A00Z&se=2018-04-05T21%3A41%3A00Z&sp=rw&sv=2017-04-17&sr=c&sig=D1HX40pFCONuWGKTCKCYXyWvbwuErrog6yTfk%2FZBQ1A%3D');

        // If one file has been selected in the HTML file input element
        var file = document.getElementById('fileinput').files[0];

        var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
        blobService.singleBlobPutThresholdInBytes = customBlockSize;

        var finishedOrError = false;
        var speedSummary = blobService.createBlockBlobFromBrowserFile('images', file.name, file, { blockSize: customBlockSize }, function (error, result, response) {
            finishedOrError = true;
            if (error) {
                // Upload blob failed
                alert("error:" + error);
            } else {
                // Upload successfully
                alert("success");
            }
        });
    }
</script>

如果我没有为blob存储配置CORS,我将检索以下错误:

然后,我使用Azure Storage Explorer设置COR,如下所示:

测试:

此外,我建议您打开一个新的匿名窗口,以缩小此问题的范围。