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

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

Solution

This happens because of Same origin policy.

You need to make AJAX call from same domain where request goes. Or make server-side changes, allowing requests from external domains.

To resolve this you need to make changes in headers at http://domain.com by allowing your external domain in headers:

Access-Control-Allow-Origin: *