Implement response header in Ajax call

Question

Below is a cross-domain call I'm trying to make via an Ajax call. The web service we're using only returns XML, so I cannot use jsonp as a dataType. As I have it written below, I receive the following error in Chrome's debugger:

Uncaught ReferenceError: Request is not defined

Here is the code:

function GetProgramDetails() {
    var URL = "http://quahildy01/xRMDRMA02/xrmservices/2011/OrganizationData.svc/AccountSet?$select=AccountId,Name,neu_UniqueId&$filter=startswith(Name,\'" + $('.searchbox').val() + "\')";
    var sourceDomain = Request.Headers["Origin"];
    var request = $.ajax({
        type: 'POST',
        beforeSend: function(request){
            request.setRequestHeader("Access-Control-Allow-Origin", sourceDomain)
        },
        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.");
        }
    });
}

EDIT

I've tried the following versions of this code and haven't seen anything different in the error message. This is being used in an enterprise environment, so is it possible that, due to security features on the server, it is not possible for this to work? I'm brand new to Ajax, so I don't know if this is something that works 100% of the time or just in a majority of settings.

        beforeSend: function (request) {
            request.setRequestHeader("Access-Control-Allow-Origin: *")
        },


        beforeSend: function (request) {
            request.setRequestHeader("Access-Control-Allow-Origin: ", "http://localhost:55152")
        },

        beforeSend: function (request) {
            request.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:55152")
        },

        beforeSend: function (request) {
            var sourceDomain = request.Headers["http://localhost:55152"];
            request.setRequestHeader("Access-Control-Allow-Origin: ", sourceDomain)
        },

        beforeSend: function (request) {
            var sourceDomain = location.protocol + '//' + location.host;
            request.setRequestHeader("Access-Control-Allow-Origin: ", sourceDomain)
        },

Answer 1

This is your problem: var sourceDomain = Request.Headers["Origin"]; You have not defined Request with a capital R.

The meat of your problem is going to be in the cross-domain request. This is possible and you're on the right track but Access-Control-Allow-Origin is something that's set on the server as a response header, not something that's sent by the client through XHR as a request header. See https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin

See the HTML5 Boilerplate .htaccess as an example of how to set this up on Apache https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess and note the browser limitations https://www.bionicspirit.com/blog/2011/03/24/cross-domain-requests.html - notably that this doesn't work in IE7 and that IE doesn't support wildcards *.

Trying to mimic jsonp (returning executable JavaScript code from the server) may be possible with some clever coding but this would be more difficult - Using JSONP when returning XML

Also, if the data is sensitive then you might not want to do any sort of cross-domain request without a private key scheme since I'm not sure if the origin request header can be spoofed. The alternative would be to set up a connection for your websites to share data on the back-end rather than the front-end.

Also, JavaScript function names are not capitalized unless they are constructors.

Answer 2

beforeSend: function(request){
    var sourceDomain = request.Headers["Origin"];
    request.setRequestHeader("Access-Control-Allow-Origin", sourceDomain)
},

You were attempting to access the request before it was created, thus throwing the undefined error. The request is the jqXHR object which is passed to the beforeSend() callback function.