FineUploader Azure 的 CORS 配置问题

Question

我正在使用 React 版本的 FineUploader 将文件上传到 Azure blob 存储，但上传器给我以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

我使用以下代码设置后端以设置 CORS 设置。此代码是 FineUploader 中的代码示例的略微修改版本： https://github.com/FineUploader/server-examples/blob/master/C%23/azure/FineUploaderAzureServer.cs

public async Task ConfigureCors()
{
   var ALLOWED_CORS_ORIGINS = new List<String> { "http://myapp.com", "http://localhost:3333"};
   var ALLOWED_CORS_HEADERS = new List<String> { "x-ms-meta-qqfilename", "Content-Type", "x-ms-blob-type", "x-ms-blob-content-type" };
   const CorsHttpMethods ALLOWED_CORS_METHODS = CorsHttpMethods.Delete | CorsHttpMethods.Put | CorsHttpMethods.Options;
   const int ALLOWED_CORS_AGE_DAYS = 5;

   var properties = await _client.GetServicePropertiesAsync();

   properties.DefaultServiceVersion = "2013-08-15";
   await _client.SetServicePropertiesAsync(properties);

   var addRule = true;
   if (addRule)
   {
      var ruleWideOpenWriter = new CorsRule()
      {
         AllowedHeaders = ALLOWED_CORS_HEADERS,
         AllowedOrigins = ALLOWED_CORS_ORIGINS,
         AllowedMethods = ALLOWED_CORS_METHODS,
         MaxAgeInSeconds = (int)TimeSpan.FromDays(ALLOWED_CORS_AGE_DAYS).TotalSeconds
      };
   properties.Cors.CorsRules.Clear();
   properties.Cors.CorsRules.Add(ruleWideOpenWriter);
   await _client.SetServicePropertiesAsync(properties);
   }
}

以上代码运行良好。当我登录到我的 Azure 门户时，我在我的存储帐户的 CORS 选项卡下看到了这些设置。

在我研究的过程中，我注意到有人认为这个问题可能是由于来自本地主机的请求造成的。我将应用程序移至 Azure 网站进行测试，但我仍然遇到同样的错误。我确实在我的 CORS 设置中包含了这个测试站点的新 URL。

这是我很好的上传器包装器初始化：

const uploader = new FineUploaderAzure({
    options: {
      cors: {
          expected: true,
          sendCredentials: true
      },
      signature: {
        endpoint: 'http://localhost:49065/getsas'
      },
      request: {
          endpoint: 'https://myaccount.blob.core.windows.net/test-container'
      },
      uploadSuccess: {
        endpoint: 'http://localhost:49065/success'
      }
    }
})

知道是什么导致了这个问题吗？

更新：下面是我在 Azure 门户上看到的 CORS 设置的屏幕截图：

这里是指定选项的代码：

这是来自 Chrome 的请求 header 的屏幕截图：

Answer 1

问题出在您的 SAS 端点 (https://ingridapp.azurewebsites.net)，而不是 Azure Blob 存储。您尚未设置 SAS 端点来处理 CORS/cross-origin 请求。

FineUploader Azure 的 CORS 配置问题

CORS configuration issue with FineUploader Azure

cors

fine-uploader