Why is my Bearer Token from Angular not visible in Firefox

Question

My function looks like this:

  testFunctionAuth() {
    const promise = new Promise((resolve, reject) => {
      this.http.get(AppConfigService.settings.apiServer.rest + 'systems/all', { headers: { 'Authorization': 'Bearer eyJ...rxbwcO-w' } })
        .subscribe(res => {
          resolve(res);
        },
          err => {
            console.error(err);
            reject(undefined);
          });
    });

  }

But I get a 401 back and in the Header, the Auth token is even missing:

What is also strange is that Firefox says the Method is OPTIONS and not GET. Why?

Answer 1

The OPTIONS request is performed without the authentication header as according to the CORS specification. However your backend seems to verify the user credentials but as you don't have the auth token in header, the server returns a 401 (Unauthorized).

from https://stackoverflow.com/a/40723041 :

According to the CORS specification when a preflight request is performed user credentials are excluded.

(...) using the method OPTIONS, and with the following additional constraints:

• (...)
• Exclude the author request headers.
• Exclude user credentials.
• (...)

_{(emphasis is mine)}

With this in mind, the problem seems to be on the API side of things, which should be accepting OPTIONS requests without requiring authentication.