如何将Node.js Azure函数生成的SAS令牌传递至HTML前端？

步骤1：封装生成SAS令牌的HTTP触发Function #

把你已实现的createContainerSas逻辑，封装成一个HTTP触发的Azure Function，让它能响应前端请求并返回令牌。示例代码：

const { BlobServiceClient } = require('@azure/storage-blob');

module.exports = async function (context, req) {
    try {
        // 从环境变量读取存储账户信息
        const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
        const accountKey = process.env.AZURE_STORAGE_ACCOUNT_KEY;
        const containerName = "你的容器名称";

        // 初始化存储客户端
        const blobServiceClient = BlobServiceClient.fromConnectionString(
            `DefaultEndpointsProtocol=https;AccountName=${accountName};AccountKey=${accountKey};EndpointSuffix=core.windows.net`
        );
        const containerClient = blobServiceClient.getContainerClient(containerName);

        // 生成SAS令牌（按需调整权限和有效期）
        const sasUrl = await containerClient.generateSasUrl({
            permissions: "racwdl",
            expiresOn: new Date(Date.now() + 3600 * 1000) // 1小时有效期
        });

        // 返回仅包含令牌的部分（去掉前缀URL）
        context.res = {
            status: 200,
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*" // 生产环境替换为你的前端域名
            },
            body: { sasToken: sasUrl.split('?')[1] }
        };
    } catch (error) {
        context.res = {
            status: 500,
            body: { error: error.message }
        };
    }
};

部署完成后，复制该Function的HTTP触发URL（示例：https://你的函数应用名.azurewebsites.net/api/GetSasToken）。

步骤2：前端通过Fetch调用接口获取令牌 #

在前端HTML脚本中，用fetch调用上述接口拿到SAS令牌，再用令牌执行上传/下载操作。示例代码：

<!DOCTYPE html>
<html>
<body>
    <input type="file" id="fileInput">
    <button onclick="handleUpload()">上传文件</button>

    <script>
        async function handleUpload() {
            try {
                // 调用Azure Function接口获取SAS令牌
                const res = await fetch('https://你的函数应用名.azurewebsites.net/api/GetSasToken');
                if (!res.ok) throw new Error('令牌获取失败');
                
                const { sasToken } = await res.json();
                const accountName = "你的存储账户名";
                const containerName = "你的容器名称";
                const file = document.getElementById('fileInput').files[0];

                // 用令牌初始化前端存储客户端并上传
                const blobServiceClient = new Azure.Storage.Blobs.BlobServiceClient(
                    `https://${accountName}.blob.core.windows.net?${sasToken}`
                );
                const containerClient = blobServiceClient.getContainerClient(containerName);
                const blobClient = containerClient.getBlobClient(file.name);
                
                await blobClient.uploadData(file);
                alert('上传成功');
            } catch (err) {
                console.error(err);
                alert('操作失败：' + err.message);
            }
        }
    </script>
    <!-- 引入Azure存储Blob前端SDK -->
    <script src="https://aka.ms/azure-storage-blob-js"></script>
</body>
</html>

错误原因说明 #

1. 404错误：你之前调用的Function路径无效，可能是URL写错、Function未正确部署，或是触发方式配置错误。必须使用HTTP触发Function的完整公网URL。
2. Uncaught ReferenceError: createContainerSas is not defined：前端浏览器环境无法运行Node.js专属的Azure存储依赖包，不能直接把后端的生成逻辑嵌入前端脚本，必须通过后端接口返回令牌。

生产环境注意事项 #

• 把Access-Control-Allow-Origin的值替换为你的前端域名，避免跨域安全风险。
• SAS令牌的权限和有效期要按需设置，遵循最小权限原则。
• 存储账户密钥要通过Azure Function的环境变量配置，禁止硬编码在代码中。

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