jquery $.ajax custom http headers issue

Question

I'm querying a REST webservice which uses custom http headers for authentication.

If I perform a POST without the headers I'm getting the expected error, but when I add the headers I get a 404 error instead of what I actually need.

This is my code

$.ajax({
  type: 'POST',
  url: 'http://server.com/service',
  beforeSend: function (xhr) { xhr.setRequestHeader('CUSTOM-HEADER-KEY', 'CUSTOM-HEADER-VALUE') },
  success: function(data) {    
    alert('success.');
  }
});

Here's the firebug headers output:

OPTIONS /service HTTP/1.1 Host: server.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip, deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Origin: null Access-Control-Request-Method: POST Access-Control-Request-Headers: custom-header-key Pragma: no-cache Cache-Control: no-cache

and the smae headers when performing the post with poster, which returns desired result.

POST /service HTTP/1.1 Host: server.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip, deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive CUSTOM-HEADER-KEY: CUSTOM-HEADER-VALUE Pragma: no-cache Cache-Control: no-cache Content-Length: 0

The difference is pretty obvious, but I don't know what I'm doing wrong in the jquery code.

Could anyone help me please?

Blender is on the right track. This is most likely a sandbox violation. Either access the service VIA jsonp or use your server as a proxy to the service. — John
– John, Commented Dec 16, 2011 at 18:19
"and the smae headers when performing the post with poster".. what is "POSTER" ? — humblelistener
– humblelistener, Commented Nov 1, 2012 at 20:14

j0k · Accepted Answer · 2013-01-02 12:23:18Z

5

In a cross domain request if the header is not allowed by the service browser will simply remove it

At first browser browser will make an OPTION call to check for the allowed (Origin, Headers, Methods)

In your service configuration you have to allow the header in order to be able to send it to server using

Access-Control-Allow-Headers: YOUR_HEADER_NAME

edited Jan 2, 2013 at 12:23

j0k

22.8k28 gold badges81 silver badges90 bronze badges

answered Jan 2, 2013 at 12:06

Amr Monjid

511 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

elmasse · Accepted Answer · 2011-12-16 18:32:39Z

2

This is a Cross domain request. So you cannot solve it from browser side. You might need a Server Side Proxy to perform POST to a different domain.

answered Dec 16, 2011 at 18:32

elmasse

2312 silver badges4 bronze badges

Comments

Yigit Erol · Accepted Answer · 2012-01-04 10:22:34Z

2

Any custom headers on cross domain calls triggers a pre-flight request which is an OPTIONS call. You need to either bypass security check for OPTIONS calls or handle the requests separately since the custom headers are not passed with the OPTIONS request. Also there is no harm in allowing pre-flight request since no actual data is passed back to the browser with that call. Basically the browser asks to the server if it is allowed to make that call before actually making it. You might need to check your Access-Control headers too. All these changes are on the server side btw so you need to have full control over the webservice.

answered Jan 4, 2012 at 10:22

Yigit Erol

1781 silver badge7 bronze badges

2 Comments

juancancela Over a year ago

Even understanding that sending customer headers on OPTIONS makes no sense from a CORS perspective...Do you know if theres a hack or workaround to add customer headers on OPTIONS request?

Yigit Erol Over a year ago

I said your custom headers are NOT sent with the OPTIONS request. It is basically a simple request asking if it is allowed to do POST, PUT etc on this path. And no, there is no workaround for adding any custom headers to OPTIONS calls, browsers do not allow allow this as a security measure. You can always use JSONP to go around CORS limitations but you will have to use query params to pass any data to the server as it is just a < script > GET

orolo · Accepted Answer · 2011-12-16 18:18:52Z

1

This may or may not help but I think you can add the headers in the data option:

$.ajax({
  type: 'POST',
  data: put the results of your header request here,
  url: 'http://server.com/service',
  beforeSend: function (xhr) { xhr.setRequestHeader('CUSTOM-HEADER-KEY', 'CUSTOM-HEADER-VALUE') },
  success: function(data) {    
    alert('success.');
  }
});

answered Dec 16, 2011 at 18:18

orolo

3,9532 gold badges32 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery $.ajax custom http headers issue

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related