The error message "Unauthorized use of the Request header field Authorization" is occurring within the Tastypie framework

Question

The error message "Unauthorized use of the Request header field Authorization" is occurring within the Tastypie framework

Encountering an error with ApiKeyAuthentication on my Tastypie resources when making an HTTP request using AJAX and Tastypie:

Error: 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.

Looking for solutions to this issue.

Chrome's request headers:

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

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

Both have Authorization headers but still not working.

Django middleware used to modify response headers: https://gist.github.com/1164697

Edit: Issue identified - connection only accepts domain.com, not www.domain.com

javascript django backbone.js tastypie

Answer 1

Answer №1

Antyrat's response is lacking some details.

You must indicate the specific headers your server permits, such as Authorization.

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

Answer 2

Antyrat's response is lacking some details.

You must indicate the specific headers your server permits, such as Authorization.

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

Answer 3

Answer №2

After giving a thumbs up to @Manuel Bitto's answer,
I wanted to share another solution for implementing a Cors Filter that has been effective for me with Apache Tomcat 5.x:

public class CustomCorsFilter implements Filter {

    public CustomCorsFilter() { }

    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 recommend paying close attention to including OPTIONS in the "Access-Control-Allow-Methods" header values as mentioned above.
This is crucial because when making requests with special headers or content types, like in my scenario, the XMLHttpRequest object initiates an additional OPTIONS call, which must be handled in your code.
Referencing the explanation provided here by Mozilla can provide further insight into this issue.
I hope this information proves helpful.

Answer 4

After giving a thumbs up to @Manuel Bitto's answer,
I wanted to share another solution for implementing a Cors Filter that has been effective for me with Apache Tomcat 5.x:

public class CustomCorsFilter implements Filter {

    public CustomCorsFilter() { }

    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 recommend paying close attention to including OPTIONS in the "Access-Control-Allow-Methods" header values as mentioned above.
This is crucial because when making requests with special headers or content types, like in my scenario, the XMLHttpRequest object initiates an additional OPTIONS call, which must be handled in your code.
Referencing the explanation provided here by Mozilla can provide further insight into this issue.
I hope this information proves helpful.

Answer 5

Answer №3

The reason behind this issue is due to the enforcement of the Same origin policy.

In order to fix this problem, you must initiate an AJAX call from the same domain where the request is being sent. Alternatively, you can modify your server settings to allow requests from external domains.

To address this issue, you will need to adjust the headers on by including your external domain in the allowed headers:

Access-Control-Allow-Origin: *

For more information, please refer to this article.

Answer 6

The reason behind this issue is due to the enforcement of the Same origin policy.

In order to fix this problem, you must initiate an AJAX call from the same domain where the request is being sent. Alternatively, you can modify your server settings to allow requests from external domains.

To address this issue, you will need to adjust the headers on by including your external domain in the allowed headers:

Access-Control-Allow-Origin: *

For more information, please refer to this article.

Answer 7

Answer №4

The issue arose when attempting to access www.domain.com instead of domain.com. While domain.com functioned properly, accessing www.domain.com triggered a detection that I was making requests from a different domain.

Answer 8

The issue arose when attempting to access www.domain.com instead of domain.com. While domain.com functioned properly, accessing www.domain.com triggered a detection that I was making requests from a different domain.

Answer 9

Answer №5

Although this question may be dated, I recently encountered a CORS issue after integrating owin into my project. Despite searching extensively on Google and experimenting with various solutions, I was able to resolve the CORS problem by including the following code:

<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />

For more in-depth information, please refer to the links provided below. Thank you.

[

Answer 10

Although this question may be dated, I recently encountered a CORS issue after integrating owin into my project. Despite searching extensively on Google and experimenting with various solutions, I was able to resolve the CORS problem by including the following code:

<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />

For more in-depth information, please refer to the links provided below. Thank you.

[

The error message "Unauthorized use of the Request header field Authorization" is occurring within the Tastypie framework

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having trouble with charts not appearing on your Django website?

Removing a row from a table with the click of a button

Issue with AngularJS causing HTML input field to limit the display to only three digits

When is the __v value in Mongoose updated?

Error: Class cannot be loaded by React Webpack loader

Tips for preventing the unwanted portrayal of a rectangle on canvas?

Eliminate classes from radios that are not selected

Ways to dynamically manipulate HTML elements in Angular 5

ReactJS component experiencing issues with loading images

Activate the download upon clicking in Angular 2

Is there a way to switch the classList between various buttons using a single JavaScript function?

perform the .then() function within a returned promise

Incorporating the JQuery plugin Lightbox_me into a Ruby on Rails application

How to stop a checkbox from being selected in Angular 2

Utilizing Jquery on the client side in conjunction with a Node.js server

Implement Vue.js functionality to dynamically add the 'active' class upon clicking an element, while also removing

Django Form ListBox

Angular Resolve Upon Application Reloading

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

Creating visual content on a website