Javascript Azure AD-OAuth 2-隐式授权-CORS错误，尝试使用应用程序进行身份验证时出错，但在我从浏览器访问URL时工作正常

我正在为一个非常简单的webapp实现OAuth2隐式授权流，我想保护它。我正在使用MSAL来实现这一点。我遇到的问题是，当我从浏览器尝试URL时，它会将我带到组织登录页面，然后将我带到重定向URI

然而，当我从应用程序调用它时，我得到一个CORS错误。堆栈跟踪如图所示

Access to XMLHttpRequest at '**********/oauth2/authorize/.well-known/openid-configuration' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.js:99 ClientAuthError: Error: could not resolve endpoints. Please check network and try again. Details: function toString() { [native code] }
    at ClientAuthError.AuthError [as constructor] (webpack:///./node_modules/msal/lib-es6/error/AuthError.js?:26:28)
    at new ClientAuthError (webpack:///./node_modules/msal/lib-es6/error/ClientAuthError.js?:111:28)
    at Function.ClientAuthError.createEndpointResolutionError (webpack:///./node_modules/msal/lib-es6/error/ClientAuthError.js?:121:16)
    at eval (webpack:///./node_modules/msal/lib-es6/UserAgentApplication.js?:455:125)
XHRClient.js:43 GET ***********/authorize/.well-known/openid-configuration net::

我的代码如下所示

import $ from "jquery";
import 'bootstrap';
import * as Msal from "msal";

window.addEventListener("load", (event) => {
   const msalConfig = {
      auth: {
        clientId: “***************”,
        authority: "https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize"
      },
      cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
        forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new
      }
    };

    const loginRequest = {
      scopes: ["openid"],
    };


    console.log(new Msal.UserAgentApplication(msalConfig));

    const myMSALObj = new Msal.UserAgentApplication(msalConfig); 

    myMSALObj.handleRedirectCallback(authRedirectCallBack);

 function authRedirectCallBack(error, response) {
      if (error) {
        console.log(error);
      } else {
       console.log(response);
      }
 }


 myMSALObj.loginPopup(loginRequest)
    .then(loginResponse => {  
        console.log('id_token acquired at: ' + new Date().toString());
        if (myMSALObj.getAccount()) {
          console.log(myMSALObj.getAccount());
          // showWelcomeMessage(myMSALObj.getAccount());
        }
    }).catch(function (error) {
      console.log(error);
    });


}

从“jquery”导入$；
导入“引导”；
从“Msal”导入*作为Msal；
window.addEventListener（“加载”，（事件）=>{
常量msalConfig={
认证：{
客户ID:“****************”，
权限：“https://login.microsoftonline.com//oauth2/v2.0/authorize"
},
缓存：{
cacheLocation:“sessionStorage”//此选项配置缓存的存储位置
storeAuthStateInCookie:false，//如果您在IE11或Edge上遇到问题，请将其设置为“true”
forceRefresh:false//将其设置为“true”以跳过缓存令牌并转到服务器获取新令牌
}
};
常量登录请求={
作用域：[“openid”]，
};
console.log（新的Msal.UserAgentApplication（msalConfig））；
const myMSALObj=新的Msal.UserAgentApplication（msalConfig）；
myMSALObj.handleRedirectCallback（authRedirectCallBack）；
函数authRedirectCallBack（错误，响应）{
如果（错误）{
console.log（错误）；
}否则{
控制台日志（响应）；
}
}
myMSALObj.loginPopup（loginRequest）
.then（loginResponse=>{
log（'id_令牌获取时间：'+new Date（）.toString（））；
if（myMSALObj.getAccount（））{
log（myMSALObj.getAccount（））；
//showWelcomeMessage（myMSALObj.getAccount（））；
}
}).catch（函数（错误）{
console.log（错误）；
});
}

此URL看起来很奇怪：

**********/oauth2/authorize/.well-known/openid配置

应该是这样的：

或者，它可以是您的租户id/“组织”/“消费者”，而不是“普通”

很可能您在MSAL上配置的

权限

错误。 它不应包括“/oauth2/authorize”。 有效权限示例：

---

非常感谢您这么做！我的工作权限终点是权限：“login.microsoftonline.com/”