XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' is present

1.1K Asked by CrownyHasegawa in Power BI , Asked on Apr 23, 2021

We have a customer who is having a problem with the embedded visualforce page for their custom objects that include our component. he issue is with the Cirrus_Files_Dog visualforce page. The page is embedded on the standard page layout for their custom object, “Dog”. When a Dog record is viewed, the VF page is rendered. The page then starts polling to see when a process is complete. This polling request is failing because the request is originating from a different domain:

Looking at the network tab, you can see that the Origin header is set to “https://na14.salesforce.com”. The request is going to “c.na14.visual.force.com” so the request fails.

Network tab This design works fine for other customers. This is one such environment, where the origin is “c.na10.visual.force.com” - the same as the host for the request, so the request goes through.

Network tab from a different Org is working We can’t figure out why there’s a distinction between these two salesforce environments. We’re getting these two behaviors in the same browser.

It’s worth mentioning that if we bring up the Cirrus_Files_Dog page directly (rather than embedded in the page layout), the polling is successful and the page works as expected -- because the Origin for that request is the same as the request host.

Answered by Emma Cornish

Since Spring 15 it is possible to implement CROS (Cross Origin Resource Sharing) to work around the same origin policy issue. This is more useful for external domains that are calling into a Salesforce hosted API.

OLD

I'm not sure why salesforce is using different domains. But the issue can be addressed using the built-in HTTP(S) Proxy.

You can enable the proxy in the standard setup menu:

          Setup -> Security Control -> Remote Sites / Remote Proxy Settings

To solve xmlhttprequest cannot load no access control allow origin, you can add your own salesforce instance. e.g. eu1.salesforce.com (don't forget to enable https)

In a second step you have to modify your ajax request:

          var credential = ' OAuth ' + '{!GETSESSIONID()}'; // native VF function var apiUrl = "https://na1.salesforce.com/services/data/v26.0/chatter/users/me"; $.ajax({ type: "GET", // for community pages, use whole community url including path, e.g. // https://logan.blitz01.t.force.com/customers/services/proxy. url: "https://c.na1.visual.force.com/services/proxy", contentType: 'application/json', cache: false, success : function(response) { alert&#40;"result" + response&#41;; }, error : function(response) { alert&#40;"Failed" + response&#41;; }, dataType: "json", beforeSend: function(xhr) { xhr.setRequestHeader('SalesforceProxy-Endpoint', apiUrl); xhr.setRequestHeader("Authorization", credential); xhr.setRequestHeader('X-User-Agent', 'MyClient'); } });

Salesforce offers great functionality to edit the request header. It's possible to change or add a headers to your http response. However, I tried to overwrite several fields including the http status code, cross-origin. But it didn't work out the way I expected.

==> The best solution is to use the fully documented HTTP Proxy service from salesforce.

XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' is present

Your Answer