What are those extra HTTP OPTIONS api calls in network tab ?

The Network tab in Chrome DevTools is a powerful tool for analyzing web app performance. It allows developers to see all the network requests made by the browser, including HTTP requests, web sockets, and other network activity. The Network tab provides a detailed view of each request, including the request and response headers, the request and response bodies, and the timing information for each request.

When making an HTTP request, the browser sends an OPTIONS request to the server before sending the actual request. The OPTIONS request is called a preflight request and is used to find out the supported HTTP methods and other options supported for the target resource before sending the actual request.

In the Network tab, OPTIONS requests are displayed as a separate entry from the actual request.

The "OPTIONS" request is one of the HTTP methods utilized in CORS. It's like a polite inquiry sent by the browser to the target server, asking for permission to proceed with the actual cross-origin request, which could be a GET, POST, or another HTTP method.

This "OPTIONS" request includes information about the upcoming request type and the headers that will be sent along with it. The server then responds with specific CORS headers, indicating whether the actual request is permitted or not.

In response to the "OPTIONS" request, the server sends back CORS headers, such as "Access-Control-Allow-Origin," "Access-Control-Allow-Methods," and "Access-Control-Allow-Headers." These headers specify which origins are allowed to access its resources, which HTTP methods are permitted, and which headers can be used. This ensures that cross-origin requests are only allowed when explicitly approved by the server.

If the server's response to the "OPTIONS" request includes the necessary CORS headers and gives the green light, the browser proceeds to send the actual request (like a GET or POST request) to the server.