[英]Azurite docker image and CORS
I'm developing an Azure function application in C#.我正在 C# 中开发 Azure function 应用程序。 I'm trying to run the application locally and am having a large amount of difficulty around getting a file upload to work with Azurite.
我正在尝试在本地运行该应用程序,并且在上传文件以与 Azurite 一起使用时遇到了很大的困难。
The application has a frontend written in Angular.该应用程序有一个用 Angular 编写的前端。 It utilizes the
"@azure/storage-blob": "^12.6.0"
library to upload a file to Azure storage with the following code:它利用
"@azure/storage-blob": "^12.6.0"
库将文件上传到 Azure 存储,代码如下:
private uploadFile(audioMedia: AudioMediaDto, file: File | null, storageAccessInformation: StorageAccessInformationDto): Observable<TransferProgressEvent> {
const sub = new Subject<TransferProgressEvent>();
if (file) {
const url = `${env.blobStorageUri}?${storageAccessInformation.accessToken}`;
const blobServiceClient = new BlobServiceClient(url);
const containerClient = blobServiceClient.getContainerClient(storageAccessInformation.containerName);
containerClient.getBlobClient(`${storageAccessInformation.uploadDirectory}/${audioMedia.id}`)
.getBlockBlobClient()
.uploadData(
file,
{
onProgress: (progress: TransferProgressEvent) => sub.next(progress)
}
)
.then(
() => sub.complete(),
() => sub.error('')
);
} else {
sub.error('');
}
return sub.asObservable();
}
Here is my docker-compose.yaml
这是我的
docker-compose.yaml
version: "3.9"
services:
azurite:
image: mcr.microsoft.com/azure-storage/azurite
command: "azurite --loose --blobHost 0.0.0.0 --blobPort 10000 --queueHost 0.0.0.0 --queuePort 10001 --location /workspace --debug /workspace/debug.log"
ports:
- 10010:10000
- 10011:10001
- 10012:10002
volumes:
- ./azurite:/workspace
frontend:
build: frontend
ports:
- 4200:4200
When I run docker-compose up
, I open the Azure storage emulator and connect to my Azurite instance and then right click on the 'Blob Containers' and configure a CORS policy that looks as follows:当我运行
docker-compose up
,我打开 Azure 存储模拟器并连接到我的 Azurite 实例,然后右键单击“Blob Containers”并配置如下所示的 Z5A8FEFF0B4BDE3EEC9244B76023B79 策略
I create a container through Azure storage explorer and then right click on it and choose "Get Shared Access Signature...".我通过 Azure 存储资源管理器创建一个容器,然后右键单击它并选择“获取共享访问签名...”。 I make the Expiry Time for a year in the future and select all of the permissions.
我将到期时间设置为未来一年,select 所有权限。 When I click create though, I see the following error message:
但是,当我单击创建时,我看到以下错误消息:
Error when calling Azure Storage:'version' must be >= '2019-10-10' when providing 'x' permission.
调用 Azure 存储时出错:提供“x”权限时,“版本”必须 >=“2019-10-10”。
While I believe this will be a problem, if I currently run the application as is and try to upload a document to the container, I'm getting the following message:虽然我相信这将是一个问题,但如果我当前按原样运行应用程序并尝试将文档上传到容器,我会收到以下消息:
Access to XMLHttpRequest at 'http://localhost:10010/devstoreaccount1/container-name/src%2F0e237853-f7a9-4dc8-b892-a0eddc2688d8?sv=2018-03-28&st=2021-06-30T15%3A03%3A48Z&se=2022-07-01T15%3A03%3A00Z&sr=c&sp=c&sig=qWHZ4wpkoVZwvJbPK0r6%2Fwf%2B5LL3kBjgEc6oFm3ikUA%3D' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
访问 XMLHttpRequest 在 'http://localhost:10010/devstoreaccount1/container-name/src%2F0e237853-f7a9-4dc8-b892-a0eddc2688d8?sv=2018-03-28&st=202301-06-348Zse=5% -07-01T15%3A03%3A00Z&sr=c&sp=c&sig=qWHZ4wpkoVZwvJbPK0r6%2Fwf%2B5LL3kBjgEc6oFm3ikUA%3D' 来自来源 'http://localhost:4200' 已被 CORS 阻止通过预访问控制的请求: :请求的资源上不存在“Access-Control-Allow-Origin”header。
I can see that the CORS settings I applied to my container were saved though because when I look at the ./azurite/__azurite_db_blob__.json
file, I see the following section in it:我可以看到我应用到我的容器的 CORS 设置被保存了,因为当我查看
./azurite/__azurite_db_blob__.json
文件时,我看到了以下部分:
What setup/steps am I missing, that would enable me to upload a document to the azurite container running in the docker image?我缺少哪些设置/步骤,这将使我能够将文档上传到在 docker 映像中运行的 azurite 容器?
With CORS, the values specified in AllowedHeaders
and ExposedHeaders
properties must match exactly with the headers sent and received respectively.对于 CORS,在
AllowedHeaders
和ExposedHeaders
属性中指定的值必须与分别发送和接收的标头完全匹配。 A mismatch in these header values will cause CORS related errors.这些 header 值不匹配将导致 CORS 相关错误。
Furthermore, in my experience different browsers send/receive different headers and that would also cause CORS related errors.此外,根据我的经验,不同的浏览器发送/接收不同的标头,这也会导致 CORS 相关错误。
Simplest way to fix this is to set *
for both AllowedHeaders
and ExposedHeaders
properties.解决此问题的最简单方法是为
AllowedHeaders
和ExposedHeaders
属性设置*
。 What this will do is allow all headers and you will not get CORS error.这将允许所有标题,您不会收到 CORS 错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.