Question

我使用React版本的FineUploader将文件上传到Azure blob存储，上传者给我发出以下错误：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上资源。

我使用以下代码设置后端以设置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选项卡下看到了这些设置。

在我研究时，我注意到有人建议问题可能是由于来自localhost的请求。我将应用程序移动到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的请求标头的屏幕截图：

Answer 1

问题在于您的SAS端点（https://ingridapp.azurewebsites.net），而不是Azure Blob存储。您尚未设置SAS端点来处理CORS /跨源请求。

FineUploader Azure的CORS配置问题

1 个答案: