Custom headers added in AngularJS only appear in Access-Control-Request-Headers headers

Question

I am trying to use an interceptor to add a custom header for each request in an AngularJS application using the following code:

angular.module('app').factory('httpRequestInterceptor', function () { return { request: function (config) { config.headers['testheader'] = 'testheaderworks'; return config; } }; }); angular.module('app').config(function ($httpProvider) { $httpProvider.interceptors.push('httpRequestInterceptor'); }); 

This code was copied from the answer to this question.

Unfortunately, when I look at the resulting queries, I get the following:

Preliminary Headers Displayed

Access-Control-Request-Headers: accept, testheader

Access-Control-Request Method: GET

Origin: http: // localhost: 61577

Referer: http: // localhost: 61577 /

User-Agent: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, e.g. Gecko) Chrome / 46.0.2490.86 Safari / 537.36

I confirmed this on both the network tab in Chrome and the server side. Why is the custom header key "testheader" added to the Access-Control-Request-Headers and not to the common headers? What happened to the cost? Is there any other way to add custom headers to every AngularJS request that avoids this problem?

Answer 1

If someone reads this and has the same problem:

The problem was that Angular was doing a cross-search request that prevented the browser. To enable this request, I had to include a server-side header. In our case (NodeJs), the code for this was:

 app.use(function (req, res, next) { res.header("Access-Control-Allow-Headers", testheader"); next(); });