Angularjs: Why does adding an authorization header cause a -1 status response?

Question

I have a pre-existing angular code that gets data from an API. I'm trying to add an authentication token to the request.

To begin with I tried a simple example

.factory('getDep', [
        '$resource', function($resource) {
            return $resource('/ContactsDatabaseAPI/deps/:id', { id: '@id' }, {
                query: {
                    method: 'GET',
                    isArray: false,
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                },
                create: {
                    method: 'POST'
                },
                update: {
                    method: 'PUT'
                },
                remove: {
                    method: 'DELETE'
                }
            });
        }

When the GET call is fired, and F12-ing in Chrome, I get an error message of:

angular.js:11821 OPTIONS http://localhost:56057/ContactsDatabaseAPI/deps net::ERR_CONNECTION_RESET

The return status of -1 and no sign of the call making it to the server side.

Without the headers line, it works fine.

If I try the GET call in Postman with the same Authorization value in the header, this also works fine.

I've also tried to add the header in the httpInterceptor and get the same result:

config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + authData.token;

Other things I've tried:

A random header name causes the same issue.
I've added 'Content-Type' = 'text/plain; charset=utf-8' as a header. This has no change to the result

I'm using angular 1.5.6

Using Restier (https://github.com/OData/RESTier) Basically Web API 2 written in .net — Tadhg, Oct 21 '16 at 15:58

score 2 · Answer 1 · answered Oct 21 '16 at 15:54

2

try this (in the controller) :

$http.defaults.headers.common.Authorization = 'Bearer ' + token;

answered Oct 21 '16 at 15:54

Mourad Idrissi

3,455
5
17
29

We use a couple of different APIs in the application. I believe adding this will mean the token is attached to all API calls. – Tadhg Oct 21 '16 at 16:00
it does the same thing as what written, the difference is that you forced the http header. (you can use it on each call of service) – Mourad Idrissi Oct 21 '16 at 16:04
I gave it a go anyway. I get the same error message – Tadhg Oct 21 '16 at 16:09
are you using oauth ? or your own API ? (make sure of the OPTIONS and GET requests on the server side) – Mourad Idrissi Oct 21 '16 at 16:11

score 1 · Accepted Answer · answered Oct 24 '16 at 16:06

I've solved my issue and thanks to @Mourad-Idrissi for pointing me in the right direction.

The reason it worked before is that there was no Pre-Flight checks before the API was run. When I added the header, this changed the way the client communicated to the API. Now there was a OPTIONS call to the API which was causing the error. As the domain was different, this introduced me to the world of CORS.

By adding the following to my Application_BeginRequest() method in my backend Web API, Pre-flight now passes and my application continues.

if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
    HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
    HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
    HttpContext.Current.Response.End();
}

Angularjs: Why does adding an authorization header cause a -1 status response?

2 Answers2

Linked