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

Question

We have a customer who is having a problem with the embedded visualforce page for their custom objects that include our component.

The 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.

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.

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.

Answer 1

UPDATE

Since Spring 15 it is possible to implement CROS (Cross Origi Resource Sharing) to work around the same origi 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

There 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("result" + response);
               },
        error : function(response) {
                      alert("Failed" + response);
               },                 
        dataType: "json",
        beforeSend: function(xhr) {
            xhr.setRequestHeader('SalesforceProxy-Endpoint', apiUrl);
            xhr.setRequestHeader("Authorization", credential);
            xhr.setRequestHeader('X-User-Agent', 'MyClient');
        }


    });

Sources: https://trailhead.salesforce.com/modules/visualforce_fundamentals, https://gist.github.com/henriquez/3146782

Don't try to modify the response header

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

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

Answer 2

In Spring `15 Salesforce added support of CORS (Cross-Origin Resource Sharing) to work around the browsers Same Origin policy. See Spring ’15 Preview – CORS for the Force.com REST API

This is more useful for external domains that are calling into a Salesforce hosted API.