Sending POST message with AJAX Problem

Question

I am currently trying to send a POST message which works fine except for the error that there are not correct credentials. However, after I add the credentials header, the message type is changed into OPTIONS and fails. I do not understand how adding a header causes the type to change to OPTIONS. Any help would be appreciated.

    ajaxRequest = $j.ajax({
                       url: url,
                       type: 'POST',
                      beforeSend : function(req) {
                           req.setRequestHeader('Authorization', auth),
                      }
                       success: function(data, status) {
                           console.log("Success!!");
                           console.log(data);
                           console.log(status);
                           },
                       error: function(xhr, desc, err) {
                           console.log(xhr);
                           alert('fail')
                          console.log("Desc: " + desc + "\nErr:" + err);
                           }

                    });

EDIT: just to be more clear, I can literally go in and comment out the setRequestHeader function and it sends the message POST.

From 1.5 version onwards they have added headers settings, try to use that instead of setting it in beforeSend event. You can set a key/value pair. — ShankarSangoli, Jun 17 '11 at 14:13
Oh sorry about that, I tried the headers setting first and then went to this version to see if it solved it. — Josh, Jun 17 '11 at 14:14
I have used it at any many places in my projects it should work fine if used it correctly. — ShankarSangoli, Jun 17 '11 at 14:19
Do you have any insight as to why adding a header would cause a change from POST to OPTIONS? — Josh, Jun 17 '11 at 14:24
Could it have something to do with a comma missing after `url: url`? — iamandrus, Jun 17 '11 at 14:36
Good catch, but no, I fixed it in the question but that was just my error where I removed the actual URL I was using before posting here. — Josh, Jun 17 '11 at 14:38

score 3 · Answer 1 · answered Jun 27 '11 at 11:29

The problem you're encountering is because of cross-domain restrictions when using AJAX. When you try to set an authorization header, the browser issues what's known as a pre-flight request to see if the server will accept requests from this domain.

A pre-flight request is typically sent as an OPTIONS request. If the server you're invoking doesn't return an Access-Control-Allow-Origin header that matches your domain, the AJAX request is blocked. There's more on this here: Cross-Origin Resource Sharing

"User agents can discover via a preflight request whether a cross-origin resource is prepared to accept requests, using a non-simple method, from a given origin."

I've run into the same problem- there are a few possible workarounds depending on your scenario. If you have any way of setting the above mentioned header on the 3rd party server (some applications/services offer this) then that's probably the easiest way.

There's also a javascript library called EasyXDM that may work for you, but again, it will only be of use if you have access to the 3rd party server to upload a configuration file for this library.

Other options to investigate are PostMessage and Cross Domain Iframe communication. The latter is more of an old-school hack, the former is the recommended approach for newer browsers. It won't work for IE6/7.

The option we will probably end up using is a simple proxy- invoke our own server with the AJAX request, and on the server invoke the 3rd party server. This avoids the cross domain issue entirely, and has other advantages for our scenario.

Boopathi Rajaa · Answer 2 · 2011-06-17T14:16:17.457

0

I guess this is a problem in Internet Explorer. without explicitly telling the request-method (POST|GET) the request header doesn't contain the custom-header in IE, but it works in other browsers.

Yet try to post this in the bugs for jquery. Also try in other browsers.

Edit 1 : I saw this as a bug in jQuery 1.4.x .... I reported a bug report now.

edited Jun 17 '11 at 14:16

answered Jun 17 '11 at 14:09

Boopathi Rajaa

4,659
2
31
53

it currently does not work in IE or firefox. Whether it works in other browsers will not really matter since I have to support IE and firefox. – Josh Jun 17 '11 at 14:11

CamelBlues · Answer 3 · 2011-06-17T14:33:08.080

0

The OPTIONS response happens when the server does not know how to respond to the ajax request.

I've seen it happen often when trying to post to a third-party domain (i.e. cross-site posting)

The OPTIONS method represents a request for information about the communication options available on the request/response chain identified by the Request-URI. This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

Have you tried:

Having some sort of callback on the url that is being posted to?
Explicitly setting the headers (I'm assuming you're using PHP) on the url that is being posted to?

edited Jun 17 '11 at 14:33

answered Jun 17 '11 at 14:14

CamelBlues

3,444
5
29
37

Can you give an example of what you mean? – Josh Jun 17 '11 at 14:18
Are you tying to send a post to a third party-site (i.e. cross-domain)? This can also cause the options response. For setting the headers in php on the target url, you would use the php header() function http://php.net/manual/en/function.header.php I've also be able to resolve the OPTIONS issue when using JSON by using JSONP with a callback. Here is a good article on JQuery and JSONP http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ – CamelBlues Jun 17 '11 at 14:29
Yes it is a third party site, but it works fine without adding the header except the third-party complains the header is missing. – Josh Jun 17 '11 at 14:33
It sounds like the 3rd party site doesn't need the auth header. Have you tried another (non-auth) header in your request? – CamelBlues Jun 17 '11 at 14:40
I understand the idea of CORS, however I do not understand how adding a header, more specifically the Authorization header, causes the change. – Josh Jun 17 '11 at 14:41
The OPTIONS response is hella-confusing because it comes back in a number of cases, but I would wager you're getting it because the server doesn't know what to do with the combination of your POST and headers – CamelBlues Jun 17 '11 at 14:44
The options is not a response from the server but what I am sending. When I send the OPTIONS I get no response from the server. – Josh Jun 17 '11 at 14:47
To clarify: you're sending an OPTIONS request, not a POST? And if that's the case, is your auth variable creating a proper string for an authroization header? I.e. "Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==" – CamelBlues Jun 17 '11 at 14:53
Correct, I am sending OPTIONS, when I want to send POST. The authorization header is actually an OAuth authorization header and I am fairly confident it is correct. – Josh Jun 17 '11 at 16:16
Have you tried adding a callback? http://stackoverflow.com/questions/5805205/how-to-send-twitter-oauth-access-tokens-with-ajax-request – CamelBlues Jun 17 '11 at 18:46

Sending POST message with AJAX Problem

3 Answers3