Ajax - 'Origin localhost is not allowed by Access-Control-Allow-Origin'

Question

I'm relatively new to Ajax and was just tasked with this cross-domain call. We have a text box on our web page that a user will use to preform a search of company names. By clicking a button next to the text box, the Ajax call will be requested. Unfortunately the web service is located in a separate domain, so this is naturally causing issues.

Below is my best attempt at making this work. I should also note, the purpose of this call is to return the results in an XML format, which will be parsed in the success portion of the request.

Here is the error message again:

Origin http://localhost:55152 is not allowed by Access-Control-Allow-Origin.

I'm at a loss as to what to do for a work-around, any ideas would be greatly appreciated.

function GetProgramDetails() {
    var URL = "http://quahildy01/xRMDRMA02/xrmservices/2011/OrganizationData.svc/AccountSet?$select=AccountId,Name,neu_UniqueId&$filter=startswith(Name,\'" + $('.searchbox').val() + "\')";
    var request = $.ajax({
        type: 'POST',
        url: URL,
        contentType: "application/x-www-form-urlencoded",
        crossDomain: true,
        dataType: XMLHttpRequest,
        success: function (data) {
            console.log(data);
            alert(data);
        },
        error: function (data) {
            console.log(data);
            alert("Unable to process your resquest at this time.");
        }
    });
}

Solution

This error is due to the restriction enforced in cross-domain resource sharing. This has been implemented as a part of security feature to restrict the clients(domain) of a resource via cross domain calls. When you send a request to the webservice or api or similar, it adds Origin header in the request for the server or destination (here your api) to validate if the request is coming from an authorized source or not. Ideally the api/server should look for the Origin in the Request header it received and probably validate against the set of origins(domains) which it is permitted to serve the resources to. If it is coming from a permitted domain it will add the same domain in the response header as "Access-Control-Allow-Origin" value. wildcard is also permitted for this, but the issue is that with wild card permission any one can make a request and get it served (with some restrictions like an api is authenticated via windows auth or cookies where you need to send the withCredentials value * is not allowed). it is not a good practice to use wildcard origin the response header which makes it open to everyone.

These are some ways to set the response header with the values:-

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://yourdomain.com

you can even add multiple Access-Control-Allow-Origin headers in the same response (I believe works in most browsers)

Access-Control-Allow-Origin: http://yourdomain1.com
Access-Control-Allow-Origin: http://yourdomain2.com
Access-Control-Allow-Origin: http://yourdomain3.com

On the server side (c# syntax) you would do this:-

var sourceDomain = Request.Headers["Origin"]; //This gives the origin domain for the request
     Response.AppendHeader("Access-Control-Allow-Origin", sourceDomain ); //Set the response header with the origin value after validation (if any) .Depending on the type of application you are using syntax may vary.

Hope this helps!!!