使用Azure Storage浏览器端JavaScript库生成SAS时出错求助

Hey there! Let's walk through the most common issues that might be causing your upload failure when using the Azure Storage Blob JavaScript client library in the browser. Since you mentioned you followed the preview guide and set up a container with container-level access, here are the key things to check:

• First, confirm the SAS token you're using includes the Write permission—this is mandatory for uploading blobs. Also verify the token's expiration date hasn't passed.
• Make sure your SAS URL is formatted correctly: it should look like https://<your-storage-account>.blob.core.windows.net/test?<your-sas-token> (don't omit the "test" container name in the path).
• Critical note: Never use your storage account key directly in browser code—stick to SAS tokens or Azure AD OAuth tokens for client-side operations.

• Ensure you're loading compatible preview versions of the Azure libraries in the correct sequence. For example, dependencies like polyfills should load before the storage blob library. A working setup might look like this:

<script src="https://cdn.jsdelivr.net/npm/@azure/core-asynciterator-polyfill@1.1.0/dist/browser/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@azure/core-rest-pipeline@1.10.0/dist/browser/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@azure/storage-blob@17.0.0/dist/browser/index.js"></script>

• If you see errors like azblob is not defined in the console, this means the library didn't load properly—check for typos in the CDN URLs or version mismatches.

• Make sure you're instantiating the client correctly. For a container SAS URL, use:

const containerClient = new azblob.ContainerClient("https://<your-account>.blob.core.windows.net/test?<your-sas-token>");

• When handling file uploads, ensure you're passing the File object correctly and setting the right content type (so the uploaded image renders properly later):

const fileInput = document.getElementById("image-upload");
const file = fileInput.files[0];
if (!file) return;

const blockBlobClient = containerClient.getBlockBlobClient(file.name);

// Wrap in async function since upload uses await
async function uploadImage() {
  try {
    const result = await blockBlobClient.uploadBrowserData(file, {
      blobHTTPHeaders: { blobContentType: file.type }
    });
    console.log("Upload successful!", result);
  } catch (err) {
    console.error("Upload failed:", err);
  }
}

uploadImage();

• Browser-side uploads will fail without proper CORS rules on your storage account. Head to the Azure Portal and configure these settings for your account:
  • Allowed origins: Add your webpage's domain (e.g., http://localhost:3000; use * only for testing, never production)
  • Allowed methods: Include at least PUT and OPTIONS (the browser sends an OPTIONS preflight request before uploads)
  • Allowed headers: Include Content-Type or use * for testing
  • Exposed headers: Can set to * for testing
  • Max age: 3600 (or a value that fits your needs)

• Since you mentioned an error but didn't share details, open your browser's developer tools (F12) and check the Console tab:
  • A CORS error will explicitly state "No 'Access-Control-Allow-Origin' header is present"
  • A 403 Forbidden error points to missing permissions or an expired SAS token
  • A 404 error means the container name or SAS URL is incorrect

If you can share the exact error message and a snippet of your code, I can give you a more targeted fix!

内容的提问来源于stack exchange，提问作者Khuram