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

Question

I am trying to create a React.js application, which has a div:

<div onClick={this.handleClick} />

Inside the function I copied code from the 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;
  })
}

When I click on the <div> it throws the following error in Chrome console.

login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0:1 Failed to load resource: the server responded with a status of 400 (Bad Request)

localhost/:1 Failed to load https://login.microsoftonline.com/common/oauth2/devicecode?api-version=1.0 : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost ' is therefore not allowed access. The response had HTTP status code 400. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

I do understand the problem is that I'm trying to call an API that does not match with the http://localhost/ same origin, so it denies.

The application is built with webpack (no special things), React.js, Typescript, Less. It is hosted in IIS, by simply creating an Application, and pointing to the build folder.

I'm asking, how can I make it work, since I cannot just add headers like Access-Control-Allow-Origin: to any request, because the implementations are in the npm packages.

Any guidance is appreciated. Thanks.

Answer 1

Currently you cannot use the Azure Key Vault REST API from a browser side web application due to the CORS limitations.

There is request on Azure Key Vault Feedback site already to add CORS support, that you can up-vote.

As a workaround you can create a small web application that runs on the server and proxies your request to the Key Vault. I've created a small PHP app for this that I will share on GitHub soon. (I will update the post with the link.)

The sample you linked is a Node.js app that can run as an app but not within a browser.

Details of CORS