Как загрузить файл из приложения реагирования в эмулятор магазина 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 на окнах, введите 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-объектов.Настройте параметры CORS по своему желанию.