'Request header field Authorization is not allowed' error - Tastypie

Question

I am getting the following error while using ApiKeyAuthentication for my Tastypie resources when I try to do an HTTP request using AJAX and Tastypie:

XMLHttpRequest cannot load http://domain.com/api/v1/item/?format=json&username=popo&api_key=b83d21e2f8bd4952a53d0ce12a2314c0ffa031b1. Request header field Authorization is not allowed by Access-Control-Allow-Headers. 

Any ideas on how to solve this?

Here are the request headers from Chrome:

Request Headersview source  Accept:*/* Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3  Accept-Encoding:gzip,deflate,sdch  Accept-Language:en-US,en;q=0.8  Access-Control-Request-Headers: origin, authorization, access-control-allow-origin, accept, access-control-allow-headers  Access-Control-Request-Method: GET 

Here are the response headers from Chrome:

Response Headersview source  Access-Control-Allow-Headers: Origin,Content-Type,Accept,Authorization  Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE  Access-Control-Allow-Origin:*  Connection:keep-alive  Content-Length:0 Content-Type: text/html; charset=utf-8  Date:Fri, 11 May 2012 21:38:35 GMT  Server:nginx 

As you can see, they both have headers for Authorization, yet authorization does not work.

Here is the django middleware that I am using to edit the response headers: https://gist.github.com/1164697

Edit: I figured out the problem. I was trying to connect to www.domain.com, and it only accepts domain.com

Answer 1

Antyrat's answer is not complete.

You have to specify which headers your server allows; in your case Authorization.

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Authorization 

Answer 2

Although I upvoted the answer of @Manuel Bitto,
I would like to post another answer which contains a complete Cors Filter that works for me with Apache tomcat 5.x:

public class CorsFilter implements Filter {      public CorsFilter() { }      public void init(FilterConfig fConfig) throws ServletException { }      public void destroy() { }      public void doFilter(              ServletRequest request, ServletResponse response,             FilterChain chain) throws IOException, ServletException {         HttpServletResponse httpServletResponse = (HttpServletResponse)response;         httpServletResponse.addHeader("Access-Control-Allow-Origin", "*");         httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS, DELETE");         httpServletResponse.addHeader("Access-Control-Allow-Headers", "Authorization");          chain.doFilter(request, response);     } } 

I would suggest to specifically pay attention to the addition of OPTIONS to to the "Access-Control-Allow-Methods" header values.
The reason for doing that is that according to the explanation provided here by Mozilla,
if your request (let's say POST) contains a special header, or content type (and this is my case), then the XMLHttpRequest object will generate an additional OPTIONS call, which you need to address in your code.
I hope this helps.