[SalesForce] XMLHttpRequest cannot load visual.force.com as requested origin is thedomainname.the.salesforce.com

Finally, I solved the problem. I'm pasting my code here for reference

    var result = sforce.connection.login("myname@mymail.com", "mypassword+mysecurityToken");
    sforce.connection.init('{!sessionId}', 'REST web service url'); // here pass current session id of the org from which you are making request.

    sforce.connection.remoteFunction({
           url : REST web service url,
           requestHeaders: {"Authorization":"Bearer "+result.sessionId, "Content-Type":"application/json"}, // here pass the session id of the org in which you have your REST service
           requestData: data to post in JSON format,
           method: "POST",
           onSuccess : function(response) {
                  console.log(response);
              },
           onFailure : function(response) {
                  alert("Failed" + response)
              }
       });

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.