温馨提示:本文翻译自stackoverflow.com,查看原文请点击:OAuth Authentication - Access Token using JavaScript (CORS Policy) error
azure-active-directory javascript oauth-2.0 powerbi

OAuth Authentication - 使用JavaScript访问令牌(CORS策略)错误

发布于 2020-05-27 11:56:13

我正在使用JavaScript将Power BI Reports嵌入到另一个应用程序中,并且可以使用下面的JavaScript代码生成访问令牌(Barear),但并非在所有浏览器中都可以使用。它显示在下面的错误消息。

通过CORS策略阻止了对来自源“空”的https://login.microsoftonline.com/ <> / oauth2 / token” 处的XMLHttpRequest的访问:对预检请求的响应未通过访问控制检查:否“访问- Control-Allow-Origin'标头出现在请求的资源上。

我添加了必需的请求标头,但结果仍然相同。

	 var key;  
	 var request = new XMLHttpRequest(); 
    request.open("POST", "https://login.microsoftonline.com/<<tenant_id>>/oauth2/token", true); 
  
	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	request.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with');
	request.setRequestHeader('Access-Control-Allow-Origin', '*');
    request.send("grant_type=client_credentials&client_id=<<clientid>>&client_secret=<<clientsecret>>&resource:<<resourceurl>>"); // specify the credentials to receive the token on request
    request.onreadystatechange = function () {
        if (request.readyState == request.DONE) {
            var response = request.responseText;
            var obj = JSON.parse(response); 
            key = obj.access_token; 
            token_ = key; 
        }
    }

有任何想法吗?

谢谢!

查看更多

提问者
Mittal Patel
被浏览
9
Tony Ju 2020-03-11 09:38

您永远不应将客户端机密放在前端。

我们建议您为前端使用azure-activedirectory-library-for-js轻松集成AAD。您可以使用Microsoft Online Auth引用No'Access-Control-Allow-Origin'标头以了解详细信息。

client_credentialsgrant_type用于仅应用程序场景。如果必须使用客户端凭据流,则需要在应用程序的后端获取访问令牌并将其返回给前端。