Question

我正在尝试在React应用程序中为Azure存储模拟器上传文件。

我正在使用https://aka.ms/downloadazurestoragejs

这是我的代码：

const azure = require('./azure-storage.blob.js');
const devStoreCreds = azure.generateDevelopmentStorageCredentials();
let blobService = azure.createBlobService(devStoreCreds);
const serviceProperties = {
    Cors: {
        CorsRule: [{
            AllowedOrigins: ['*'],
            AllowedMethods: ['POST', 'PUT'],
            AllowedHeaders: ['*'],
            ExposedHeaders: ['*'],
            MaxAgeInSeconds: 200
        }]
    }
};
blobService.setServiceProperties(serviceProperties, function(error, result, 
response) {
    if (error) {
        alert('service failed, open browser console for more detailed 
info.');
    }
});

blobService.createContainerIfNotExists('mycont',function(error, result, 
response) {
    if (error) {
        alert('Container Failed created');
    }
    else{
        let blockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 
    * 512;
        const options = {
            blockSize : blockSize
        };
        blobService.singleBlobPutThresholdInBytes = blockSize;

        let finishedOrError = false;
        let speedSummary = 
        blobService.createBlockBlobFromBrowserFile("mycont", file.name, file, 
         options, function(error, result, response) {
        finishedOrError = true;
        if (error) {
            alert('Upload failed, open browser console for more detailed 
              info.');
            console.log(error);
        } else {
            alert('ok.');
        }
    });
}
});

但我遇到此错误：

无法加载资源：服务器的响应状态为403（未启用CORS或找不到与此请求匹配的规则。）

无法加载http://127.0.0.1:10000/devstoreaccount1/?comp=properties&restype=service：对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问来源“ http://localhost:3000”。响应的HTTP状态码为403。

Answer 1

CORS用于设置您请求的服务是否允许来自不同域的浏览器的js脚本。这意味着从浏览器发送的所有请求都需要CORS检查，包括setServiceProperties。

因此，您需要创建一个单独的文件来执行CORS设置作为后端操作。例如，您可以使用nodejs运行setServiceProperties。

安装nodejs。
在一个文件夹中，打开Windows上的任何命令行工具（如cmd），输入npm install azure-storage以安装存储模块以供脚本使用。

在此文件夹中创建一个setcors.js文件。

const azure = require('azure-storage');
const devStoreCreds  = azure.generateDevelopmentStorageCredentials();
const blobService = azure.createBlobService(devStoreCreds);

const serviceProperties = {
    Cors: {
        CorsRule: [{
            AllowedOrigins: ['*'],
            AllowedMethods: ['POST', 'PUT','HEAD'],
            AllowedHeaders: ['*'],
            ExposedHeaders: ['*'],
            MaxAgeInSeconds: 200
        }]
    }
};

blobService.setServiceProperties(serviceProperties, function(error, result, response) {
    if (error) {
        console.log(error);
    }
});

在cmd中，输入node setcors.js以运行脚本。没有消息表示它成功执行。
如果出现异常提示，请获取最新版本storage emulator，只需按照链接进行安装即可。

请注意，HEAD中包含方法AllowedMethods，因为它在createContainerIfNotExists中使用。

您还可以使用storage-explorer来设置CORS。

存储帐户->（开发）->右键单击Blob容器。根据需要配置CORS设置。

Answer 2

正如刘杰瑞（Jerry Liu）所说，我们需要配置Azure商店模拟器的CROS。

我们可以执行以下操作：

$ErrorActionPreference = "Stop";

# config

$AccountName='your account name'
$AccountKey='your account key'

# derived config

$BlobEndpoint="http://127.0.0.1:10000/$($AccountName)"
$QueueEndpoint="http://127.0.0.1:10001/$($AccountName)"
$TableEndpoint="http://127.0.0.1:10002/$($AccountName)"

$ConnectionString = "" +
    "DefaultEndpointsProtocol=http;" + 
    "BlobEndpoint=$($BlobEndpoint);" +
    "QueueEndpoint=$($QueueEndpoint);" +
    "TableEndpoint=$($TableEndpoint);" +
    "AccountName=$($AccountName);" +
    "AccountKey=$($AccountKey)"

# authentication

    $Context = New-AzureStorageContext `
    -ConnectionString $ConnectionString

# cors rules
$CorsRules = (@{
    AllowedHeaders=@("*");
    AllowedOrigins=@("*");
    ExposedHeaders=@("Content-Length");
    MaxAgeInSeconds=60*60*24;
    AllowedMethods=@("Get", "Post")
})

Set-AzureStorageCORSRule `
    -ServiceType Table `
    -Context $Context `
    -CorsRules $CorsRules

# check
Get-AzureStorageCORSRule `
    -ServiceType Table `
    -Context $Context

类似的线程供您参考：

How do i add a CORS rule to the Azure Storage Emulator with HTTP?

如何将文件从React应用上传到Azure商店模拟器

2 个答案: