CODEWITHSUNDEEP
javascriptjavaangularjshttphttprequest
Daveus
Daveus

Reputation: 121

Setting http headers with angular

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

Upvotes: 0

Views: 2107

Answers (4)

Daveus
Daveus

Reputation: 121

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

Upvotes: 0

Tiago Medici
Tiago Medici

Reputation: 2194

$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';

Upvotes: 0

gargkshitiz
gargkshitiz

Reputation: 2168

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

Upvotes: 1

Rytis Alekna
Rytis Alekna

Reputation: 1377

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.

Upvotes: 0

Related Questions