如何在纯JavaScript中从Azure Key Vault URI获取API密钥并赋值给apiKey变量

你的这段代码没法直接正常工作，存在几个关键问题，我给你拆解下：

• 变量名错误：你创建的XMLHttpRequest实例是a，但在onload回调里却用了xhr.responseText，这会直接报错，得改成a.responseText。
• CORS限制：Azure Key Vault默认不允许前端页面直接跨域请求，浏览器会拦截这个请求，哪怕你令牌正确也没用。
• 令牌问题：代码里的accessToken完全没定义，你得先通过Azure AD获取针对Key Vault的有效访问令牌，而且前端直接持有令牌非常不安全，很容易被攻击者窃取。
• 路径不匹配：你要获取的是Example密钥，但代码里的端点写的是/secrets/Eg，得改成对应正确的密钥名称。

哪怕修正了变量名，前端直接调用还是会遇到CORS和安全问题，正确的做法是通过后端服务代理请求Key Vault，前端只和自己的后端交互，由后端去调用Key Vault并返回密钥。如果非要前端尝试，得先配置Key Vault的CORS规则（不推荐，风险极高），还要用MSAL.js库来获取合法令牌，修正后的代码大概是这样：

// 先确保已引入MSAL.js，并且配置了Azure AD应用
const msalConfig = {
    auth: {
        clientId: "你的Azure AD应用ID",
        authority: "https://login.microsoftonline.com/你的租户ID"
    }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);

const keyVaultEndpoint = "https://<keyvault-name>.vault.azure.net/secrets/Example";

async function getApiKey() {
    try {
        // 获取针对Key Vault的访问令牌
        const tokenResponse = await msalInstance.acquireTokenSilent({
            scopes: ["https://vault.azure.net/user_impersonation"],
            account: msalInstance.getAllAccounts()[0]
        });
        const accessToken = tokenResponse.accessToken;

        const xhr = new XMLHttpRequest();
        xhr.open("GET", keyVaultEndpoint);
        xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
        xhr.onload = function() {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                window.apiKey = response.value;
            } else {
                console.error("获取密钥失败:", xhr.statusText);
            }
        };
        xhr.send();
    } catch (error) {
        console.error("获取令牌或密钥出错:", error);
    }
}

但再次强调：前端直接调用Key Vault存在严重安全风险，令牌泄露就等于密钥泄露，强烈建议通过后端中转。

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