适用于节点的 Azure SDK - 密钥保管库管理 - CORS 预检:服务器响应的状态为 400(错误请求)

Question

我正在尝试创建一个 React.js 应用程序，它有一个div：

<div onClick={this.handleClick} />

在函数中，我从Azure GitHub复制了代码：

https://github.com/Azure/azure-sdk-for-node/tree/master/lib/services/keyVaultManagement

import * as  msRestAzure  from "ms-rest-azure";
import KeyVaultManagementClient from "azure-arm-keyvault";
public handleClick(evt: any): void {
// Interactive Login
let client: any;
msRestAzure.interactiveLogin().then((credentials) => {
client = new KeyVaultManagementClient(credentials, "my-subscription-id");
return client.vaults.list();
}).then((vaults) => {
console.dir(vaults, {depth: null, colors: true});
return;
})
}

当我单击<div>时，它会在Chrome控制台中引发以下错误。

login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0:1 加载资源失败：服务器响应状态为 400 (错误请求(

本地主机/：1 加载失败 https://login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0： 对预检请求的响应未通过访问控制检查：否 "访问控制允许源"标头存在于请求的上 资源。因此，不允许访问源"http://localhost"。 响应具有 HTTP 状态代码 400。如果响应不透明 您的需求，将请求的模式设置为"no-cors"以获取资源 禁用 CORS。

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

我确实了解问题是我正在尝试调用与http://localhost/相同来源不匹配的 API，因此它拒绝。

该应用程序是用webpack(没有特殊的东西(，React.js，Typescript，Less构建的。它承载在 IIS 中，只需创建一个应用程序，并指向生成文件夹。

我在问，我怎样才能让它工作，因为我不能只向任何请求添加像Access-Control-Allow-Origin:这样的标头，因为实现在 npm 包中。

任何指导都值得赞赏。 谢谢。

Answer 1

由于 CORS 限制，目前无法从浏览器端 Web 应用程序使用 Azure 密钥保管库 REST API。

Azure 密钥保管库反馈站点上已请求添加 CORS 支持，你可以投赞成票。

解决方法是创建一个小型 Web 应用程序，该应用程序在服务器上运行，并将请求代理到 Key Vault。我为此创建了一个小型PHP应用程序，我将很快在GitHub上分享。(我将用链接更新帖子。

链接的示例是一个 Node.js 应用，它可以作为应用运行，但不能在浏览器中运行。

CORS的详细信息