Preflight Requests
This concept is not new but what i forgot to observe in Preflight request is the response headers which is sent back by the server. To debug issues related to CORS issues noticing these headers is very important. These kind of scenario we will face mostly in angular based apps where UI (https://example.org.com) makes call to API (https://example.api.com) in different domain or making call from UI to Identity provider(OKTA,PING) for user authentication.
Response headers contains what is allowed by server if the Preflight response includes appropriate CORS headers, the browser proceeds to make the actual request. If any of the CORS headers are missing or don’t allow the specific origin, method, or headers, the browser blocks the actual request.
A preflight request is an OPTIONS request which includes the following headers:
Request Headers:
- origin — tells the server the origin where the request is coming from
- access-control-request-method — Specifies the HTTP method (GET, POST, PUT, DELETE, etc.) of the actual request.
- access-control-request-headers — tells the server which headers the request includes
Response Headers:
- access-control-allow-origin — the origin that the server will allow
- access-control-allow-methods — a comma-separated list of methods that the server will allow
- access-control-allow-headers — a comma-separated list of headers that the server will allow
- access-control-allow-headers-credentials — Indicates whether the browser should include credentials (like cookies or HTTP authentication) in the actual request
- access-control-max-age — tells the browser how long (in seconds) to cache the response to the preflight request
access-control-allow-origin header is one of the main CORS headers a server can use to show what requests it will allow.
A preflight request is automatically issued by a browser.
Below diagram depicts request and response headers for Options request
Below diagram is from www.baeldung.com would also help to understand it better
