How does the Chrome browser decide when to send OPTIONS?

Question

I have an AngularJS WebAPI application.

As far as I can understand the OPTIONS request is constructed automatically by the browser.

POST http://loca         


        

Answer 1

You can also clean your Headers when you login, before sending your POST request:

delete $http.defaults.headers.common['Authorization'];

Answer 2

When you first login you most likely set the Authorization HTTP header somewhere in your login procedure. On the other side, you forgot to remove this header when the user logs out.

When you try to login again, the Authorization HTTP header is still present. This triggers the browser to perform a preflight request (see explanation of Rob W: https://stackoverflow.com/a/27924344/548020. Considering that you try to login with a grant type password it does not make sense to send an Authorization header, as this implies that you are already authorized (= logged in). Your are basically asking your backend to log you in and at the same time telling your backend that you are already authorized (= logged in).

This can be fixed by simple removing the Authorization HTTP header when the user logs out.

Answer 3

Whether the Chrome (or any other browser) sends an OPTIONS request is exactly specified by the CORS specfication:

When the cross-origin request algorithm is invoked, these steps must be followed:
...
2. If the following conditions are true, follow the simple cross-origin request algorithm:

• The request method is a simple method and the force preflight flag is unset.

• Each of the author request headers is a simple header or author request headers is empty.

3. Otherwise, follow the cross-origin request with preflight algorithm.
Note: Cross-origin requests using a method that is simple with author request headers that are not simple will have a preflight request to ensure that the resource can handle those headers. (Similarly to requests using a method that is not a simple method.)

Your OPTIONS request contains the following request header:

Access-Control-Request-Headers: accept, authorization, content-type

This means that your Angular app has inserted the non-simple Authorization request header, probably as a part of an authentication scheme. Non-simple "author request headers" trigger the OPTIONS request, as you can see in the above quote.

To allow the request to succeed, your server should handle OPTIONS request and respond with:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Headers: authorization

To learn more about CORS, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.