Error: No 'Access-Control-Allow-Origin' header is present on the requested resource

[prateekraina]

Hi Guys,

I am trying to get the access token in order to embed the Power BI report. When i fetch the token using AcquireTokenAsync in C# application it works fine. But when i try to get the access token in my javascript code it throws below error:

"Failed to load https://login.microsoftonline.com/common/oauth2/token: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:65159' is therefore not allowed access."

Can anyone kindly guide me on how to workaround this error in order to obtain access token in Javascript.

Prateek Raina

[v-ljerr-msft · Accepted solution]

Hi @prateekraina,

Based on my research, it should be a CORS problem. Here is a similar thread in which some workaround are mentioned. Could your go to check if it works in your scenario? 

This is not a fix for production or when application has to be shown to the client, this is only helpful when UI and Backend development are on different servers and in production they are actually on same server. For example: While developing UI for any application if there is a need to test it locally pointing it to backend server, in that scenario this is the perfect fix. For production fix, CORS headers has to be added to the backend server to allow cross origin access.

The easy way is to just add the extension in google chrome to allow access using CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi...)

Just enable this extension whenever you want allow access to no 'access-control-allow-origin'header request.

Or

In Windows, paste this command in run window

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

this will open a new chrome browser which allow access to no 'access-control-allow-origin'header request

---

Regards