Understanding OPTIONS HTTP Method

Understanding OPTIONS HTTP Method

Introduction

HTTP GET and POST methods are the most common methods familiar to web developers. OPTIONS is another HTTP method worth exploring to get the information about available resources.

I got to know about this important method when I was troubleshooting an issue in one of my application. I was making a POST request while in the network tab in developer console I could see OPTIONS request getting triggered prior to the POST request.

Let us understand the OPTIONS request in this POST.

What is an OPTIONS request in HTTP ?

An OPTIONS request is a PREFLIGHT request. When making a CROSS ORIGIN request to an API the browser issues this request prior to your actual GET/POST/PUT/PATCH request. Since it is issued by the browser prior to the actual request this is called a PREFLIGHT request and you can check this is the network tab of your browser console.

This request is different from the Fetch request or the xhr (XMLHttpRequest). This request gives us the information about the allowed Headers, Method, Origin and other information for the actual request.

When a http method is not allowed for a specific endpoint the preflight OPTIONS request returns the response status code as 405 which means ** Method Not Allowed** and it also provides information about the methods and headers that are allowed.

What are the headers in an OPTIONS request ?

A typical OPTIONS request contains the below mentioned headers in the request -

  • Access-Control-Request-Headers: This would contain the HEADERS that you would be passing in the actual GET/POST request. For eg. If you are making a GET request to an endpoint then in the OPTIONS request you would be passing the headers of the GET request to check if the headers are permitted by the GET endpoint or not.

  • Access-Control-Request-Method: This header in the OPTIONS request would contain the value as GET since the OPTIONS request is for the GET request for the endpoint.

  • Host: This header would contain the domain of the remote host where your API is deployed.

  • Origin: This header would contain the domain of the server from where the actual request is originating.

  • Referrer: This header would contain the domain from where the request to the actual endpoint is referred. Somtimes this may differ from the Origin header while it might not be present in some cases.

What are the headers in an OPTIONS response ?

The response to OPTIONS request would contains a number of headers out of which the one mentioned below are important -

  • Access-Control-Allow-Headers - This contians the list of Headers allowed in the actual request for which the OPTIONS request is made.
  • Access-Control-Allow-Methods - This contians the list of Methods allowed in the actual request for which the OPTIONS request is made.
  • Access-Control-Allow-Origin - This defines the orgin for the actual request. If the value is "*" it would mean all origins are allowed.

Conclusion

OPTIONS request is important while development as it provides the CORS (Cross Origin Resource Sharing) configuration as well as the allowed HEADERS, Methods etc... for a particular endpoint.
These requests are typically sent through browsers but this can be sent to any HTTP Client like POSTMAN.

Thank you for reading the post and see you in the next post.