Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The Power BI DataViz World Championships are on! With four chances to enter, you could win a spot in the LIVE Grand Finale in Las Vegas. Show off your skills.

Reply
prateekraina
Memorable Member
Memorable Member

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

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

1 ACCEPTED SOLUTION
v-ljerr-msft
Microsoft Employee
Microsoft Employee

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? Smiley Happy

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

View solution in original post

1 REPLY 1
v-ljerr-msft
Microsoft Employee
Microsoft Employee

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? Smiley Happy

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

Helpful resources

Announcements
Feb2025 Sticker Challenge

Join our Community Sticker Challenge 2025

If you love stickers, then you will definitely want to check out our Community Sticker Challenge!

Jan NL Carousel

Fabric Community Update - January 2025

Find out what's new and trending in the Fabric community.