Not able to set custom header in angularjs

Question

I am making a http get call and want to set some custom property in header but I am not able to see these properties at my back end even not visible in http request. Here is code used by me

app.controller("BranchController", function ($scope, $http, $rootScope){
    var req = {
        method : 'GET',
        url : 'http://192.168.3.239:8082/build-api/v1.1/builds/getbranch',
        headers: {
            "username": "abcd",
            "password" : "hhhh@@@@######"
        }
    }
    $http(req).
    success(function (data, status, headers, config) {
        $scope.branchs = data;
    }).
    error(function (data, status, headers, config) {
        console.log('Api call failed', status)
    });
  });

here is the http request headers

OPTIONS /build-api/v1.1/builds/getbranch HTTP/1.1
Host: 192.168.3.239:8082
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Access-Control-Request-Headers: password, username
Access-Control-Request-Method: GET
Origin: http://localhost:63342
Referer: http://localhost:63342/Build_Web/BranchList.html?_ijt=u6e7vvngu1n5o4a1doc1jig2g4
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

Possible answer : http://stackoverflow.com/questions/15598917/adding-a-custom-header-to-http-request-using-angular-js — Madagaga, Oct 12 '16 at 09:00
Try using single quotes instead of double quotes in your headers object — Ranjith V, Oct 12 '16 at 09:05
Check in your config object I can see them there `config.headers.username` — ngCoder, Oct 12 '16 at 09:08

score 0 · Answer 1 · answered Aug 26 '19 at 15:19

This is because you are looking at the OPTIONS preflight request instead of the actual GET request. In your case I guess that the host "192.168.3.239:8082" is not the same as the one where your web application is served from. This causes the browser to issue a CORS OPTIONS preflight before making the actual GET request. There your custom headers are wrapped in the Access-Control-Request-Headers header, without the actual values. The scenarios for a browser to issue an OPTIONS preflight are described here.

Make sure to enable CORS so you can inspect the actual GET request, there you will find your custom headers along with the values.

Not able to set custom header in angularjs

1 Answers1