Can't set or override on specific header using Angular.js $http

Question

I'm using Angular.js 1.4.8 and Fiddler 4 for debugging my requests.

The following is the request I made using AngularJS $http.

var postRequest = {
    method: 'POST',
    url: 'https://speech.platform.bing.com/recognize',
    headers: {
        'Transfer-Encoding': 'chunked',
        Expect: '100-continue',
        Expect2: 'abc',
        Accept: 'application/json;text/xml',
        Host: 'region.platform.bing.com',
        'Content-Type': 'audio/wav; samplerate=8000',
        Authorization: 'auth-token',
        'Accept-Language': undefined,
        'Accept-Encoding': undefined,
        'User-Agent': undefined,
    },
    params: {
        scenarios: 'smd', // 'smd' in the internal sample code,
        locale: langString,
        'device.os': 'wp7',
        version: '3.0',
        format: 'json',
    },
    data: "test"
};

$http(postRequest).then(function (response) {
    console.log(response)
});

However, as described in below, in the actual request, there are some missing headers (e.g., Expect, Transfer-Encoding). In addition, there are still automatically added headers by Angular even after I set it as undefined (as guided in official document: https://code.angularjs.org/1.4.8/docs/api/ng/service/$http).

POST https://speech.platform.bing.com/recognize?device.os=wp7&format=json&locale=en-US&scenarios=smd&version=3.0 HTTP/1.1

Expect2: abc

Accept: application/json;text/xml

Content-Type: audio/wav; samplerate=8000

Authorization: 'auth-token'

**Accept-Language: en-US,en;q=0.8,ko;q=0.6,zh-Hans-CN;q=0.4,zh-Hans;q=0.2

Accept-Encoding: gzip, deflate**

User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; MSAppHost/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

Host: speech.platform.bing.com

Content-Length: 271491 Connection: Keep-Alive Cache-Control: no-cache

Cookie: MUIDB=39DE0AD21AD46AF2039D02BB1BB26B61

Is there any ways that

Can I add headers which I could not add using 'headers' objects, and
Can I remove the headers automatically added by Angular?

Or is it the Angular bug?

Hi, please read this section of angular maybe help you http

Maher
– Maher

2015-12-14 06:54:52 +00:00
Commented Dec 14, 2015 at 6:54 — Maher
– Maher, Commented Dec 14, 2015 at 6:54

Jeeva J · Accepted Answer · 2015-12-14 07:13:37Z

Yes you can. You can use angular interceptor to handle it globally. So for each request, you can automatically remove the unwanted headers and add necessary headers.

$httpProvider.interceptors.push(['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {
            return {
                request: function (config) {
                    config.headers = config.headers || {};
                    var authData = localStorageService.get('authData');
                    if (authData) {
                        config.headers.Authorization = 'Bearer ' + authData.token;
                    }

                    return config;
                },

                response: function (result) {
                    return result;
                },

                responseError: function (rejection) {
                    console.log('Failed with', rejection.status, 'status');

                    if (rejection.status == 401) {
                        localStorageService.remove('authData');
                        window.location.replace(window.location.origin)
                    }

                    if (rejection.status == 307) {
                        $location.url('/SessionExpired');
                    }

                    if (rejection.status == 403) {
                        $location.url('/Forbidden');
                    }

                    if (rejection.status == 500) {
                        $location.url('/InternalServerError');
                    }

                    return $q.reject(rejection);
                }
            }
        }])

Maher · Accepted Answer · 2015-12-14 06:56:37Z

0

Setting HTTP Headers

module.run(function($http) {
  $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
});

answered Dec 14, 2015 at 6:56

Maher

2,5471 gold badge21 silver badges33 bronze badges

1 Comment

Jeungmin Oh Over a year ago

This works for 'Authorization' or 'Authentication' header, not for 'Expect', 'Transfer-Encoding'.

Carlitos Way · Accepted Answer · 2020-10-21 21:04:31Z

0

Beware, other answers can be misleading ... Yes, using the suggested strategies, you can override some headers but not all! ... The reason of this is that, by specification, some headers are reserved and will be controlled only by the browser ... Examples of these reserved headers are:

Accept-Charset
Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
...

You can find more information about this in the following urls:

answered Oct 21, 2020 at 21:04

Carlitos Way

3,44422 silver badges36 bronze badges

Collectives™ on Stack Overflow

Can't set or override on specific header using Angular.js $http

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related