Azure SDK for Node - Key Vault Management - 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（错误请求）

localhost/:1 无法加载https://login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0 ：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。 因此，不允许访问 Origin ' 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 Key Vault REST API。

Azure Key Vault 反馈站点上已经请求添加 CORS 支持，您可以投票支持。

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

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

CORS 的详细信息