无法上传到Blob存储，缺少Access-Control-Allow-Origin标头 [英] Unable to upload to blob storage, missing Access-Control-Allow-Origin header

问题描述

使用浏览器中的@ azure/storage-blob模块，无法直接上传到Azure存储.它抱怨缺少请求头.上传是通过作为Office加载项运行的ReactJS应用程序完成的.

Using the @azure/storage-blob module in the browser, it's not possible to upload to azure storage directly. It complains about a missing request header. The upload is done from within a ReactJS app running as an Office Add-in.

根据Microsoft的要求，已在存储帐户中为Blob启用了CORS.

As required by Microsoft, CORS have been enabled on storage account for blobs.

我试图找到一种添加自定义HTTP标头的方法，但是没有一个奏效.

I tried finding a way to add custom HTTP Headers however, none worked.

这是上传代码

import { Credential, BlobServiceClient} from "@azure/storage-blob/browser/azure-storage-blob.min.js";

export function uploadToStorage(storageAccountName: string, storageAccountKey: string, file: SelectedFile) {
    return async (dispatch) => {
        try {
            const account = storageAccountName;
            const accountKey = storageAccountKey;
            const sharedKeyCredential = new Credential(account, accountKey);
            const blobServiceClient = new BlobServiceClient(
                `https://${account}.blob.core.windows.net`,
                sharedKeyCredential
            );
            const containerClient = blobServiceClient.getContainerClient("container-name");
            const blobClient = containerClient.getBlobClient(file.name);
            const blockBlobClient = blobClient.getBlockBlobClient();
            const uploadBlobResponse = await blockBlobClient.uploadBrowserData(file.data, {
                maxSingleShotSize: 4 * 1024 * 1024
              }, { "blobHTTPHeaders": { "blobContentType": file.mimeType } });
        }
        catch (error) { 
            console.error(error);
        }
    }
}

Chrome调试器中的错误如下:

The error from Chrome Debugger is as follow:

通过" https://somestorageaccountsomewhere访问XMLHttpRequest.来源为< https://localhost的blob.core.windows.net/blablablacontainer/Somefile-2018.5-en.docx ' :3000 "已被CORS策略阻止:对预检请求的响应未通过访问控制检查:所请求的资源上没有"Access-Control-Allow-Origin"标头.

Access to XMLHttpRequest at 'https://somestorageaccountsomewhere.blob.core.windows.net/blablablacontainer/Somefile-2018.5-en.docx' from origin 'https://localhost:3000' 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.

推荐答案

直接从浏览器上传blob不是一个好主意. 您的访问密钥已被泄露，因为任何查看该应用程序的人都可以使用它. 这种影响可能非常严重，因为任何人都可能会:例如，删除您的所有文件/上传大量数据，导致您的Azure账单激增.

It's not a good idea to upload blobs directly from the browser. Your access key is compromised since it is available to anyone viewing the app. The effects can be quite severe since anyone could for example: delete all your files / upload massive amounts of data causing your Azure bill to skyrocket.

您将需要在后端进行上传，或者使用在后端生成的SAS令牌来上传文件.

You will need to do the upload in a back-end or use a SAS token generated in a back-end to upload the file.

还可以选择Azure AD身份验证，但需要进行一些设置，并且用户需要在存储帐户或容器上具有数据访问角色.

There is also the option of Azure AD authentication, but requires some setup, and the user needs data access role on the Storage account or container.

这篇关于无法上传到Blob存储，缺少Access-Control-Allow-Origin标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！