Azure Ad CORS 如何调用 web api url答案

【问题标题】：Azure Ad CORS How call web api urlAzure Ad CORS 如何调用 web api url
【发布时间】：2020-09-04 05:42:39
【问题描述】：

我想知道如何使用 js 和 msal 库调用另一个类似自定义的 api。我有一个项目可以调用图形 api 并获取有关我的个人资料的数据，我想知道如何更改它以从我放置（注册）在 azure 广告上的自定义 api 获取数据。

我的尝试会产生 CORS 错误。

我可以登录我的 JS 项目，但我不能从这个项目调用除 GraphApi 之外的另一个 api ...

例如： AppFirst (jsproject - localhost:3000) 我登录并获取访问令牌 --------> (调用我的 api localhost:44321 ...) 导致错误 CORS

我的代码：

 function callApi(endpoint, token, callback) {

  endpoint = "https://common.onmicrosoft.com/api://myApiClientId";
  const headers = new Headers();
  const bearer = `Bearer ${token}`;

  headers.append("Authorization", bearer);

  const options = {
      method: "get",
      headers: headers
  };

  fetch(endpoint, options)
    .then(response => response.json())
    .then(response => callback(response, endpoint))
    .catch(error => console.log(error))
}

谁能告诉我怎么打这个电话？调用其他api哪个地址正确？

【问题讨论】：

如果答案有帮助，请接受它作为答案（单击答案旁边的复选标记将其从灰色切换为已填充）。谢谢。

标签： javascript api cors azure-active-directory msal

【解决方案1】：

这是一个常见的 CORS 问题。

JavaScript 无法正常访问其他来源的资源（这将导致CORS 错误）。 “其他来源”是指被访问的 URL 与运行 JavaScript 的位置不同，因为具有

不同的方案（HTTP 或 HTTPS）
不同的域
不同的端口

解决方案：

您需要在 API 端进行更改。

A Guide to Solving Those Mystifying CORS Issues

【讨论】：