Power BI Report Embed using JavaScript

mittalpatel130 · ‎03-10-2020

Hello -

I'm embedding Power BI Reports into another application using JavaScript and I could generate access token (Barear) using below JavaScript code but it doesn't work in all the browsers. It displays below error message.

Access to XMLHttpRequest at 'https://login.microsoftonline.com/<<tenant_id>>/oauth2/token' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I added required request headers but still the same result.

	 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; 
        }
    }

Any ideas?

Thank you!

csjames010 · ‎03-13-2020

The browser is blocking the request because you are getting data back from a domain that is not the same as your site. That's a good thing for security reasons. You'll want to execute that request outside of the browser. In my implementation, I have this piece running on an extremely basic Node server using express to expose it to the front end.

mittalpatel130 · ‎03-16-2020

Thank you @csjames010 !

Yes, I found out below code which uses ADAL.js, but my question is what should be the redirect_uri in my Azure AD app so that below code returns the id_token to ServiceNow Page and further we can access it for embed report javascript? Currently when I execute this code, it successfully generates the id_token in browser URL after login.

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.14/js/adal.min.js"></script>

<body>
<a href="#" onclick="login();">login</a>
<a href="#" onclick="getToken()">access token</a>
</body>
<script type="text/javascript">
    var configOptions = {
        tenant: <tenantid>, // Optional by default, it sends common
        clientId: <clientid>,
        redirectUri: "https://login.live.com/oauth20_desktop.srf",
        postLogoutRedirectUri: window.location.origin,
    }
    window.authContext = new AuthenticationContext(configOptions);

    var isCallback = authContext.isCallback(window.location.hash);
    authContext.handleWindowCallback();

    function getToken(){
        authContext.acquireToken("https://graph.microsoft.com",function(error, token){
            console.log(error);
            console.log(token);
        })
    }
    function login(){
        authContext.login();
    }
</script>

csjames010 · ‎03-17-2020

Sorry - wish I could help more, there. I'm not really that familiar with the msft libraries. I've prototyped user owns and app owns data scenarios in my app, but both methods are just using POST requests on the auth endpoints on my backend server opposed to leveraging the libraries.

Power BI Report Embed using JavaScript

Helpful resources

Power BI Monthly Update - July 2025

Join our Fabric User Panel

Fabric Community Update - June 2025

Party with Power BI’s own Guy in a Cube

Power BI Report Embed using JavaScript

Helpful resources

Power BI Monthly Update - July 2025

Join our Fabric User Panel

Fabric Community Update - June 2025