cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
pradeepperi
Level: Powered On

Cors Issues Accessing API

Hi,

 

I am facing issues in accessing an api from my PCF Control (calling the api from componentDidMount method). I am getting the below error message while calling the api. Surprisingly , this is not the error that occurs each time. Most of the time api call succeeeds and gets the data, but 20% of the api calls are failing with this error from the control. we are allowing ".dynamics.com" to send requests. Please note that this problem does not occur all the times, but pretty randomly some times ~20% times. 

 

Access to fetch at '*********' from origin '******' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

10 REPLIES 10
Power Apps Staff HemantG
Power Apps Staff

Re: Cors Issues Accessing API

Is it specific to one browser ? I dont think this is realted to react as such but can be quick validated using a standard control . Can you check the browser console logs and network traffic to see if this is missing header and any difference in the failed and sucessful calls ? 

Here are some other pointers which might help.

Browser caching -  https://stackoverflow.com/questions/21104810/what-could-explain-the-browser-intermittently-not-loadi...

https://stackoverflow.com/questions/51128176/reactjs-api-data-fetching-cors-error

Chrome extension can be used for testing CORS - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

 

 

hemant

 

 

pradeepperi
Level: Powered On

Re: Cors Issues Accessing API

Thanks for your help Hemant, it was not an issue with React i solved the problem at api. Many Thanks!


@HemantG wrote:

Is it specific to one browser ? I dont think this is realted to react as such but can be quick validated using a standard control . Can you check the browser console logs and network traffic to see if this is missing header and any difference in the failed and sucessful calls ? 

Here are some other pointers which might help.

Browser caching -  https://stackoverflow.com/questions/21104810/what-could-explain-the-browser-intermittently-not-loadi...

https://stackoverflow.com/questions/51128176/reactjs-api-data-fetching-cors-error

Chrome extension can be used for testing CORS - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

 

 

hemant

 

 


 

Power Apps Staff HemantG
Power Apps Staff

Re: Cors Issues Accessing API

 


@pradeepperi wrote:

Thanks for your help Hemant, it was not an issue with React i solved the problem at api. Many Thanks!


@HemantG wrote:

Is it specific to one browser ? I dont think this is realted to react as such but can be quick validated using a standard control . Can you check the browser console logs and network traffic to see if this is missing header and any difference in the failed and sucessful calls ? 

Here are some other pointers which might help.

Browser caching -  https://stackoverflow.com/questions/21104810/what-could-explain-the-browser-intermittently-not-loadi...

https://stackoverflow.com/questions/51128176/reactjs-api-data-fetching-cors-error

Chrome extension can be used for testing CORS - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

 

 

hemant

 

 


 


@pradeepperi , do you mind sharing some details on solution and sample code snippet? Might help someone in future 🙂

 

hemant 

Mili12
Level: Power Up

Re: Cors Issues Accessing API

@pradeepperi- Can you please share what was done to resolve this issue? I am facing a similar issue too.  Thanks in advance!

 

-Mili

Power Apps Staff HemantG
Power Apps Staff

Re: Cors Issues Accessing API

are you able to use the API just using simple html from different domain ? That setup can be used for debugging. I had pointed some resources in the thread which might be useful 

 

Hemant

pradeepperi
Level: Powered On

Re: Cors Issues Accessing API

Thanks Hemant, i have restructured the api calling functionality to a custom action and calling the custom action from the control. So, it works correctly now. Thanks again!

Mili12
Level: Power Up

Re: Cors Issues Accessing API

Pradeep, 

 

Which library have you used to invoke the custom action from type script?  The standard way to invoke from JS is to use execute.online function but in type script what is the counterpart?  I failed when I tried to use the xrm-webapi-client library. Can you share the code at a high level for reference?  I am sure many others too have similar issue.

 

-Mili

Highlighted
ben-thompson
Level 8

Re: Cors Issues Accessing API

This should show you what you need to do 

 

refreshLicense(product:string) : Promise<Xrm.RetrieveMultipleResult>{
        'use strict';	
		var clientUrl =(<any>this.context).page.getClientUrl();
		var thisRef=this;
		var req = new XMLHttpRequest();
		req.open("POST", clientUrl + "/api/data/v9.1/hdn_ValidateLicense", true);
		req.setRequestHeader("OData-MaxVersion", "4.0");
		req.setRequestHeader("OData-Version", "4.0");
		req.setRequestHeader("Accept", "application/json");
		req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
		req.onreadystatechange = function() {
			if (this.readyState === 4) {
				req.onreadystatechange = null;
				
				if (this.status === 200) {
					return this.response;

					
				} else {

					return Promise.reject(error);
				}
			}
		};
		var body=	"{'ProductName': '"+product+"'}";
		req.send(body);
	}

 

a33ik
Level 8

Re: Cors Issues Accessing API

I found an alternative way of calling messages using execute of standard WebApi wrapper. Execute method is not exposed but it is available. Here is how I use it:

const youractionrequest = {
	getMetadata: function() {
	return {
		boundParameter: null,
		parameterTypes: {},
		operationType: 0,
		operationName: "nameofyouractionhere"
		};
	}
};

(<any>context.webAPI).execute(youractionrequest).then((result: any) => {
		result.json().then((response: any) => {
			//use your parsed response here
		});
	}, 
	(e: any) => {
		//Handle reject here
	});

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

New Badges

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Users online (5,079)