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)
        },

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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.

score 0 · Answer 2 · answered Mar 21 '13 at 15:36

0

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.

answered Mar 21 '13 at 15:36

Brad M

7,857
1
23
40

When I execute this I get the error: `Uncaught TypeError: Cannot read property 'Origin' of undefined` – NealR Mar 21 '13 at 15:40
Sorry, meant to say that whatever I change the `["Origin"]` to (which in my case is `http://localhost:55152`) I get the `Uncaught TypeError` – NealR Mar 21 '13 at 15:52
Why are you trying to set the sourceDomain like that? Why not get it from the URL? There is no "Headers" property/method for the jqXHR. – Brad M Mar 21 '13 at 15:56
This is only my second time using Ajax so I'm not very familiar with it. How would I go about getting the sourceDomain from the URL? – NealR Mar 21 '13 at 15:59
1

Don't ask like 5 questions. Do some research and you'll figure it out; if you get stuck, then post that specific question. – Brad M Mar 21 '13 at 16:03
Edited per your suggestions – NealR Mar 21 '13 at 16:25

Implement response header in Ajax call

2 Answers2