FineUploader Azure的CORS配置问题
我正在使用React版本的FineUploader将文件上载到Azure blob存储,上载程序显示以下错误: 请求的服务器上不存在“Access Control Allow Origin”标头 资源 我使用以下代码设置后端以设置CORS设置。此代码是FineUploader中代码示例的稍加修改版本,如下所示: 知道是什么导致了这个问题吗 更新: 以下是我在Azure门户上看到的CORS设置的屏幕截图: 下面是指定选项的代码:FineUploader Azure的CORS配置问题,cors,fine-uploader,Cors,Fine Uploader,我正在使用React版本的FineUploader将文件上载到Azure blob存储,上载程序显示以下错误: 请求的服务器上不存在“Access Control Allow Origin”标头 资源 我使用以下代码设置后端以设置CORS设置。此代码是FineUploader中代码示例的稍加修改版本,如下所示: 知道是什么导致了这个问题吗 更新: 以下是我在Azure门户上看到的CORS设置的屏幕截图: 下面是指定选项的代码: 以下是Chrome请求头的屏幕截图:问题在于您的SAS端点(),
以下是Chrome请求头的屏幕截图:问题在于您的SAS端点(),而不是Azure Blob存储。您尚未设置SAS端点来处理CORS/跨源请求。请单独显示准确的请求url和标题,并根据Azure准确显示您的CORS规则。在原始帖子中添加了屏幕截图。我需要请求信息、标题、,等,根据浏览器开发工具,你可以去,这是一个确切的副本,本地反应应用程序,我在运行。这是我在本地运行的API应用程序的精确副本。刚刚从Chrome添加了一个请求头的屏幕截图。另外,如果我没有给你所有需要的,你可能更容易去尝试上传一个文件。哦!我不知道。我一定错过了。我在这里遵循此文档:。您能告诉我在SAS端点中哪里可以找到有关处理CORS请求的信息吗?我无法记录这些信息或提供任何建议。如果您选择在为您的应用程序提供服务的域之外的域上设置SAS服务器(您已经这样做了),则需要研究为来自优秀上传程序Azure的请求设置CORS。这将是特定于服务器和语言的。确定。我现在明白你的意思了。它们实际上不会是两个独立的应用程序。当我熟悉FineUploader时,我将它们分开。我的想法是让FineUploader成为我主要应用程序的一部分。谢谢你的帮助。顺便说一句,我在你的博客上读到了FineUploader的故事。您为支持使用FineUploader的开发人员所做的努力确实值得钦佩和赞扬。非常感谢你的帮助。再次感谢,谢谢。我试过了,但有时会让人不知所措,这就是为什么我的答案通常都很简洁的原因。对此我深表歉意。顺便说一句,CORS的最佳参考是
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);
}
}
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'
}
}
})