javascript - Azure Wep 应用程序和函数凭据不起作用

问题描述

我目前有一个 Wep 应用程序（ASP.NET Core 2.2），一个 Azure 函数返回 JSON“hi”。没有使用 NodeJS。

我已经使用 B2C 设置了我的 Web 应用程序和功能，当单独访问它们时，它们都提示登录并且工作正常。

更新：如果我访问 Web 应用程序，登录然后访问函数 url，它会给出响应“hi”但是 Ajax 请求将不起作用，除非我在通过 Web 应用程序登录后手动访问函数 url 地址。

我的问题是我有一个从 Web 应用程序到函数的 Ajax 请求，但它没有传递凭据，并且只有在我同时登录到 Web 应用程序和函数时才有效。

我希望帮助让网络应用程序将其凭据传递给函数，因此我不会收到以下错误：

在' https://xxx.b2clogin.com/xxx.onmicrosoft.com/oauth2/v2.0/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Fxxx.azurewebsites.net%2F.auth%2Flogin访问 XMLHttpRequest %2Faad%2Fcallback&client_id=5e55f7e5-2b51-4a5f-86c0-b7776b2623b2&scope=openid+profile+email&response_mode=form_post&p=b2c_1_signin&nonce=d138edf541d1423e92b99fe7ca400263_20190331110324&state=redir%3D%252Fapi%252FTest%253F_%253D1554029904731 ' (redirected from ' https://xxx.azurewebsites .net/api/Test?_=1554029904731 ') 来自原点'null' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

 function Test2() {
        console.log("2. Sending request...");
        $.ajax({
            type: "GET",
            cache: false,
            credentials: 'include',
            mode: 'cors',
            url: 'https://xxx.azurewebsites.net/api/Test',
            // contentType: "application/json; charset=utf-8",
            //dataType: "application/json",
            //data: dataValue,
           xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (response) {
                console.log('2. Done');
                console.log('2. ' + response);
            },
            failure: function (response) {
                console.log("2. Request: Failed.");
                alert(response.d);
            }
        });
    }

Web 应用程序的 API 设置

Web 应用程序的设置

Web API 的设置

Web API 的 B2C 设置

标签： javascriptazureasp.net-coreazure-functionsazure-ad-b2c

就像提到的 CSharpRocks 一样，身份验证由浏览器通过基于域传递正确的 cookie 来处理。

但我想在你的情况下，函数和 webapp 有不同的域名，对吧？这就是为什么您需要登录一次功能应用程序然后它才能工作的原因。

有多种方法可以解决这个问题

将您的 WebApp 和 Function 都放在Azure 应用程序网关之后，以便您可以通过一个域名访问它们。这样，浏览器会将 cookie 发送到此自定义域的请求中。
在您的 WebApp 上有一个端点，它将充当您的 Function App 的代理。这样，cookie 在初始请求中发送到您的 WebApp，您可以将其转发到 Function App。
我假设您有一个 MVC 应用程序，因此这个应用程序可能不适用于您的场景，但对于使用 JavaScript SPA 以及 WebApp API 和 Functions API 的人，他们可以改为执行授权代码授予流程来获取访问令牌他们将（在 JS 代码中，不是自动地）在他们的请求中传递给这两个 API。
将您的函数 API 公开为Azure AD中的新范围，并允许您的 WebApp通过委派权限访问此 API 。

javascript - Azure Wep 应用程序和函数凭据不起作用

问题描述

解决方案

推荐阅读