时间戳

首页 > 解决方案 > Azure SDK for Node - Key Vault Management - CORS preflight：服务器响应状态为 400（错误请求）

javascript - Azure SDK for Node - Key Vault Management - CORS preflight：服务器响应状态为 400（错误请求）

问题描述

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

<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 ' 请求的资源上存在标头。因此，不允许访问源“ http://localhost ”。响应的 HTTP 状态代码为 400。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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

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

该应用程序是用 webpack（没有特殊的东西）、React.js、Typescript、Less 构建的。它托管在 IIS 中，只需创建一个应用程序并指向构建文件夹即可。

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

任何指导表示赞赏。谢谢。

标签： javascriptnode.jsreactjsazureazure-keyvault

解决方案

目前，由于 CORS 限制，您无法从浏览器端 Web 应用程序使用Azure Key Vault REST API。

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

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

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

CORS的详细信息

推荐阅读