Как загрузить файл из приложения реагирования в эмулятор магазина Azure

Question

Я пытаюсь загрузить файл для эмулятора хранилища 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

Как сказал выше Джерри Лю, нам нужно настроить CROS эмулятора хранилища Azure.

Мы можем сделать как ниже:

$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

Подобная тема для вашей справки:

Как добавить правило CORS в эмулятор хранилища Azure с HTTP?

Answer 2

CORS используется, чтобы указать, разрешает ли запрашиваемый вами сервис ваш js-скрипт из браузера в другом домене. Это означает, что все запросы, отправленные из браузера, требуют проверки CORS, включая setServiceProperties,

Поэтому вам нужно создать отдельный файл для выполнения настроек CORS в качестве внутренней операции. Например, вы можете использовать nodejs для запуска setServiceProperties,

1. Установите nodejs.
2. В одной папке откройте любые инструменты командной строки, такие как cmd в Windows, введите npm install azure-storage установить модуль хранения для скрипта для использования.

3. Создайте один файл 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);
       }
   });
   

4. В cmd, ввод node setcors.js запустить свой скрипт. Нет сообщения означает, что оно выполняется успешно.

5. Если вы получили исключение, попросите вас приобрести последнюю версию эмулятора хранилища, просто перейдите по ссылке, чтобы установить его.

Обратите внимание, что метод HEAD входит в AllowedMethods потому что он используется в createContainerIfNotExists,

Также вы можете использовать Storage-Explorer для установки CORS.

Аккаунты хранения ->(Разработка)-> щелкните правой кнопкой мыши Blob Container. Настройте параметры CORS по своему желанию.