MIcrosoft PowerBi React Access Token Error No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to get microsoft powerbi access token in my react app and it is showing error No 'Access-Control-Allow-Origin' header is present on the requested resource when I use fetch. You can find what I tried below:-

useEffect(() => {
      let accessTokenData = {
        'grant_type':'password',
        'username':'******',
        'password':'******',
        'client_id': '**********',
        'client_secret': '********',
        'resource': 'https://analysis.windows.net/powerbi/api'
      }
      let formbody = [];
      for (let property in accessTokenData) {
        let encodedKey = encodeURIComponent(property);
        let encodedValue = encodeURIComponent(accessTokenData[property]);
        formbody.push(encodedKey + "=" + encodedValue);
      }
      formbody = formbody.join("&");

      fetch(`https://login.microsoftonline.com/common/oauth2/token`, {
      // mode: 'no-cors',
      method: 'POST',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
      },
      body: formbody
      })
      .then( data => data.json())
      .then(
      data => {
          setAccessToken(data)
          console.log(data['access_token'])
      }
      )
      .catch( error => console.error(error))
  }, []);

On loading the page it is showing the following error

If you have experienced dealing with this issue or worked on something similar I request you to please guide me in this regards.

Answer 1

This error is due to cors, check the similar issue on thread - github.com/jaredhanson/passport/issues/582