Question

我正在按照本教程将视频上传到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令牌和存储帐户列出所有容器。当我添加这些字段时，这也有效。它只是不会在我的网站上工作。

修改

不确定这是否有帮助，但通过使用邮递员工具捕获它们，请查看请求的样子。

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.

Answer 1

根据您的描述，我只是将您的代码重新用于我的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将CORS设置如下：

<强> TEST：

此外，我建议您打开一个新的隐身窗口来缩小此问题。

使用Javascript上传到Azure blob存储失败？

1 个答案: