angularjs node.js express angular-fullstack express-jwt

Express-jwt Throwing UnathorizedError: No Authorization Token was found in IE11 when Chrome and Firefox work

I have tracked the issue down to this call:

var validateJwt = expressJwt({
  secret: config.secrets.session
});

using the latest version of express-jwt

here is the full file

( auth.service.js from the angular-generator yeoman scafolding)

/**
 * Attaches the user object to the request if authenticated
 * Otherwise returns 403
 */
export function isAuthenticated() {
  return compose()
    // Validate jwt
    .use(function(req, res, next) {
      // allow access_token to be passed through query parameter as well
      if (req.query && req.query.hasOwnProperty('access_token')) {
        req.headers.authorization = 'Bearer ' + req.query.access_token;
      }
      console.log('In Auth Service');
      console.log('Secret=' + config.secrets.session);
      validateJwt(req, res, next);
    })
    // Attach user to request
    .use(function(req, res, next) {
      console.log('Attach User');
      User.findByIdAsync(req.user._id)
        .then(user => {
          if (!user) {
            return res.status(401).end();
          }
          req.user = user;
          next();
        })
        .catch(err => next(err));
    });
}

I see the "In Auth Service" log in IE and then this error:

   UnauthorizedError: No authorization token was found<br> &nbsp; &nbsp;at middleware (.../node_modules/express-jwt/lib/index.js:80:21)<br> &nbsp; &nbsp;at Middleware_Common_Object.&lt;anonymous&gt; (.../server/auth/auth.service.js:27:7)<br> &nbsp; &nbsp;at next (.../node_modules/composable-middleware/lib/composable-middleware.js:59:18)<br> &nbsp; &nbsp;at Middleware_Common_Object.middleware (.../node_modules/composable-middleware/lib/composable-middleware.js:76:7)<br> &nbsp; &nbsp;at middleware (.../node_modules/composable-middleware/lib/composable-middleware.js:31:25)<br> &nbsp; &nbsp;at Layer.handle [as handle_request] (.../node_modules/express/lib/router/layer.js:95:5)<br> &nbsp; &nbsp;at next (.../node_modules/expres

In Chrome and Firefox this works fine and I see the log "Attach User".

I'm not an express or jwt (or javascript for that matter) expert so any thoughts as to why this doesn't work on IE? I can't login to my application in IE11.

Headers for Chrome:

Head

{  
   "host":"localhost:9000",
   "connection":"keep-alive",
   "accept":"application/json, text/plain, */*",
   "x-xsrf-token":"XyZYPphsmONBmSrE1MoiMh4zcclJhvArkppVM=",
   "user-agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36",
   "authorization":"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQyODQwNDMsImV4cCI6MTQ2NDMwMjA0M30.YJj4LaHdhRtzfr0AdjTkZwTZM2M4B0YSoR3qactkq8o",
   "referer":"http://localhost:9000/login",
   "accept-encoding":"gzip, deflate, sdch",
   "accept-language":"en-US,en;q=0.8",
   "cookie":"connect.sid=s%3AZBJISBM2X82Odr1f763gL_hOJPCTy75G.ePulOt7zpqSQ6WHmPVqMKsjFVboteA8ALhBcR6f4J70; _gat=1; _ga=GA1.1.1107287728.1463674097; token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQyODQwNDMsImV4cCI6MTQ2NDMwMjA0M30.YJj4LaHdhRtzfr0AdjTkZwTZM2M4B0YSoR3qactkq8o; XSRF-TOKEN=XyZYPphsmONBmSrE1MoiMh4zcclJhvArkppVM%3D",
   "if-none-match":"W/\"2-11FxOYiYfpMxmANj4kGJzg\""
}

//Body was empty...

Body = {}

getting IE ...

IE11: Head

{  
   "x-xsrf-token":"VnE872wcJGAcsDuqFPo4yX3eHCjib8+VuohJY=",
   "accept":"application/json, text/plain, /",
   "referer":"http://172.20.10.2:9000/login",
   "accept-language":"en-US",
   "accept-encoding":"gzip, deflate",
   "user-agent":"Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko",
   "host":"172.20.10.2:9000",
   "dnt":"1",
   "connection":"Keep-Alive",
   "cookie":"XSRF-TOKEN=VnE872wcJGAcsDuqFPo4yX3eHCjib8%2BVuohJY%3D; connect.sid=s%3A-cBMyw42buDZePLCriiGqddXI2YSg5Ow.HKcDCPksLX7PIYpp9O1XK2aDUh%2BycceyNywDN8TZOTU; _ga=GA1.4.1855210034.1464283317; _gat=1; token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQyODQwODgsImV4cCI6MTQ2NDMwMjA4OH0.-BF00BbZknsIjAcX-EDNMtwgKaw4UFDA-Ywm4-gTlNI"
}

//body empty Body = {}

and this error popped up. UnauthorizedError: No authorization token was found

Adding Req.query (just from IE - empty also empty on Chrome)

Head

{"x-xsrf-token":"Q9WJPpcGYhLyBn1YX1I8asymB1rVtTfLN1ZJk=","accept":"application/json, text/plain, /","referer":"http://172.20.10.2:9000/login","accept-language":"en-US","accept-encoding":"gzip, deflate","user-agent":"Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko","host":"172.20.10.2:9000","dnt":"1","connection":"Keep-Alive","cookie":"_ga=GA1.4.1855210034.1464283317; _gat=1; XSRF-TOKEN=Q9WJPpcGYhLyBn1YX1I8asymB1rVtTfLN1ZJk%3D; connect.sid=s%3ANvaz9AfTMU3t0CDq-3aRzSIF7Uw_bmfh.GV6s5MXKpk3XiULQbmQrJR2w7QAuJxUb0BGCYfmjuic; token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQyODg3NzcsImV4cCI6MTQ2NDMwNjc3N30.zCsSkIdHlcCmPUHvhNv5n2mkgQDhkxG9UO0sh3y-Y3c"} Body =

{} ReqQuery

{}

///After trying Eric's suggesting and implementing the code change associated with the fix on the angular-fullstack code I got this for a header on IE. (but unfortunately didn't log in - got a 401 on the /api/user/me. part. I'm going to revert back some further changes later today that i may have done last night when i was too tired.

Head

{"accept":"application/json, text/plain, /","if-modified-since":"Mon, 26 Jul 1997 05:00:00 GMT","cache-control":"no-cache","pragma":"no-cache","x-xsrf-token":"Ajy7jYPUQj7Mnixtqq8rvJRyxj/pv6s2P36eo=","referer":"http://192.168.1.17:9000/login?auth_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.e%E2%80%8C%E2%80%8ByJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQyOD%E2%80%8C%E2%80%8BQwNDMsImV4cCI6MTQ2NDMwMjA0M30.YJj4LaHdhRtzfr0AdjTkZwTZM2M4B0YSoR3qactkq8o","accept-language":"en-US,en;q=0.5","accept-encoding":"gzip, deflate","user-agent":"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko","host":"192.168.1.17:9000","dnt":"1","connection":"Keep-Alive","cookie":"XSRF-TOKEN=Ajy7jYPUQj7Mnixtqq8rvJRyxj%2Fpv6s2P36eo%3D; connect.sid=s%3A43OG6niC7AAUnnOQ2cnbZe0mW1Qx6Ag5.xi0KLw9FbkMOWIofcbuTXBNDGxZXfZu87XXDxZDNO6A; _ga=GA1.4.540511734.1464357176; _gat=1; token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI1NzE1ODg0MjEyZTU3OTFkMzEwZmQ1MTMiLCJyb2xlIjoiYWRtaW4iLCJpYXQiOjE0NjQzNTc4NjIsImV4cCI6MTQ2NDM3NTg2Mn0.Si_4hZuntOLWwYpT2WGEKVpYi36WA3_aiuHZj7445LY"}

Body = {} Req Query = {}

///Adding what I think is the code to add the authorization header I appreciate everyones time for looking into this with me!

function authInterceptor($rootScope, $q, $cookies, $injector, Util) {
  var state;
  return {
    // Add authorization token to headers
    request(config) {
      config.headers = config.headers || {};
      if ($cookies.get('token') && Util.isSameOrigin(config.url)) {
        config.headers.Authorization = 'Bearer ' + $cookies.get('token');
      }
      return config;
    },

    // Intercept 401s and redirect you to login
    responseError(response) {
      if (response.status === 401) {
        (state || (state = $injector.get('$state'))).go('login');
        // remove any stale tokens
        $cookies.remove('token');
      }
      return $q.reject(response);
    }
  };
}

Solution

I think you have stumbled on this known issue in angular-fullstack: https://github.com/angular-fullstack/generator-angular-fullstack/issues/1880

That thread also shows the fix that has been committed in the latest source code, that you can implement manually in your generated code (commenting out a port number check in the code that otherwise fails in IE).