Setting http headers with angular

Question

I'm tring to add a header called "access-token" to all my http request like this:

var app= angular.module("MainModule", ["ngRoute"]);

app.run(function($http){
    $http.defaults.headers.common['access-token'] =ACCESSTOKEN;
})

and in my service:

 service.get= function (x) {
    console.log(ACCESSTOKEN)
    return $http({
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'access-token': ACCESSTOKEN
      },
      crossDomain: true,
      url: GETSERVICE.replace("{id}", x),
      dataType: 'json'
    }).then(function (response) {
      if (response.data) {
        return response.data;
      } else {
        return $q.reject(response.data);
      }
    }, function (response) {
      return $q.reject(response.data);
    });

  }

the problem is that i can't see the header in the network. There is only the OPTION request without my header.

my Back end cors configuration is like:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, UPDATE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, access-token");

chain.doFilter(req, res);

Any ideas how to fix it?

TY

EDIT 1: Here is the OPTION request without modifiy headers

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: access-token
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:9080
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

and whit modify headers (worked):

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: access-token
Access-Control-Request-Method: GET
access-token: 1520963789861
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:9080
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

whit modify headers I have the token in the request

gargkshitiz · Accepted Answer · 2018-03-26T11:51:28.450

CORS exists to secure APIs so that random clients do not make calls to them.

JavaScript has to take permissions to be able to make calls to those APIs. Browser is supposed to do all the heavy lifting related to CORS. But the only requirement is that the server should return the following HTTP headers for an OPTIONS request from a client:

Access-Control-Allow-Origin: <Origin fetched from the request>
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, DELETE
Access-Control-Allow-Headers: <ACCESS-CONTROL-REQUEST-HEADERS fetched from request>

If that is NOT an option, then on the client side, following code can be added to prevent all OPTIONS requests, which compromises security:

app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
  $httpProvider.defaults.headers.get = {};
}]);

See: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

the problem is that when I use modify header (the chrome extension) I can see the param "access-token" in the header also in the OPTION and with that plugin all works perfect — Daveus, Mar 26 '18 at 12:54
Don't trust debug. Sometimes, debug!=actual in dev console. Try the solution(s) once, since problem is there when you don't debug — gargkshitiz, Mar 26 '18 at 13:36

score 0 · Answer 2 · answered Mar 26 '18 at 11:27

0

That OPTIONS request is called "preflight request". It only checks if your client has a right to send a request at all (when a server has a configured CORS). If server responds positively then your browser automatically send a full request with all you provided headers.

answered Mar 26 '18 at 11:27

Rytis Alekna

1,367
8
16

I also found a broader explanation in this answer: [https://stackoverflow.com/questions/29954037/why-is-an-options-request-sent-and-can-i-disable-it] – Rytis Alekna Mar 26 '18 at 11:32

score 0 · Answer 3 · answered Mar 26 '18 at 12:55

0

$httpProvider or $http module:

//with the provider, in the app.config():
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';

$http.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';

answered Mar 26 '18 at 12:55

Tiago Medici

1,030
12
13

score 0 · Answer 4 · answered Mar 27 '18 at 08:52

0

Ok I will tell you what were the problem.

The genial man who write the rest api that I call in cross domain checked the value of the token also in the OPTION request going in null pointer.

Solved adding a filter for the option request.

TY for all

answered Mar 27 '18 at 08:52

Daveus

111
1
13

If my https://stackoverflow.com/a/49490392/945214 helped you in any way, request you to please upvote it – gargkshitiz Mar 28 '18 at 07:24

Setting http headers with angular

4 Answers4