AngularJS Satellizer jwt CORS issue when authentic

Question

i'v got weird behaviour of my code. I'm using Satellizer to authenticate user and when user is not authenticated when i execute this code:

$http.get('http://eune.api.pvp.net/api/lol/eune/v1.4/summoner/by-name/somename?api_key=XXXXXXXXXXXXXXXXX')
                    .success(function (data) {
                        console.log(data);
                    });

my request is ok and i get data

headers:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:eune.api.pvp.net
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

but when i authenticate user and try to do same request i get:

XMLHttpRequest cannot load http://eune.api.pvp.net/api/lol/eune/v1.4/summoner/by-name/somename?api_key=XXXXXXXXXXXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 401.

and headers of this request looks like:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:eune.api.pvp.net
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

my app.config

.config(function ($urlRouterProvider, $stateProvider, $httpProvider, $authProvider, API_URL) {

            $urlRouterProvider.otherwise('/');
            ... some routes ...
                    $authProvider.loginUrl = API_URL + 'login';
                    $authProvider.signupUrl = API_URL + 'register';
                    $authProvider.google({
                        clientId: 'secret',
                        url: API_URL + 'auth/google'
                    });
                    $authProvider.facebook({
                        clientId: 'secret',
                        url: API_URL + 'auth/facebook'
                    });
//                    $httpProvider.interceptors.push('authInterceptor');
        })

So how should i fix it? I suppose that those headers with Access-Control are the reason, but how should i handle it?

Answer 1

Adding skipAuthorization property in config block might be helpful:

$http.get('http://eune.api.pvp.net/api/lol/eune/v1.4/summoner/by-name/somename?api_key=XXXXXXXXXXXXXXXXX', {
    skipAuthorization: true
  })
  .success(function (data) {
    console.log(data);
  });

I usually work with the config block by preference. This is how it would look. //configuration block method:

$http({
      method: 'GET',
      url: 'http://eune.api.pvp.net/api/lol/eune/v1.4/summoner/by-name/somename?api_key=XXXXXXXXXXXXXXXXX',
      skipAuthorization: true
    });  

Good Luck.

Answer 2

Ok i figured it out. As i supposed Satellizer registers new interceptor, which adds some headers and that's why it doesn`t work. This is satellizer code :

.config(['$httpProvider', 'satellizer.config', function($httpProvider, config) {
      $httpProvider.interceptors.push(['$q', function($q) {
        var tokenName = config.tokenPrefix ? config.tokenPrefix + '_' + config.tokenName : config.tokenName;
        return {
          request: function(httpConfig) {
            var token = localStorage.getItem(tokenName);
            if (token && config.httpInterceptor) {
              token = config.authHeader === 'Authorization' ? 'Bearer ' + token : token;
              httpConfig.headers[config.authHeader] = token;
            }
            return httpConfig;
          },
          responseError: function(response) {
            return $q.reject(response);
          }
        };
      }]);
    }]);

i handled it by changing one lane to this:

if (token && config.httpInterceptor && httpConfig.rawReq !== true) {

and i pass in my httpConfig option rawReq: true but this is not nice. Is there posibility to disable specific interceptor ?

Answer 3

You could try putting the following in the satellizer config:

$authProvider.httpInterceptor = false;