DEV Community

Alireza Hassankhani
Alireza Hassankhani

Posted on

Understanding CORS Preflight Requests

In the previous article, we introduced the HTTP OPTIONS method and learned that it is commonly used to discover the capabilities of a resource.

Now it's time to understand why browsers sometimes send an OPTIONS request before the actual request.

This process is called a Preflight Request.

Isn't CORS Enough?

As we've already learned, CORS is a browser security mechanism.

If the server does not allow the requesting Origin, the browser prevents JavaScript from accessing the response.

However, this raises an important question.

What if the request itself could perform a sensitive operation on the server?

For example, imagine a Cross-Origin request using the DELETE or PUT method.

If the browser always sent the request first and only blocked the response afterward, the server might already have deleted or modified data before the browser enforced CORS.

To address this problem, browsers perform a Preflight Request for certain Cross-Origin requests.

How Does a Preflight Request Work?

Before sending the actual request, the browser first sends an OPTIONS request to the same endpoint.

The browser is essentially asking:

"Am I allowed to send the upcoming request with these characteristics?"

If the server responds with the appropriate CORS headers, the browser proceeds with the actual request.

Otherwise, the actual request is never sent.

Example

Suppose the application intends to send:

DELETE /users/15 HTTP/1.1
Origin: https://app.example.com
Enter fullscreen mode Exit fullscreen mode

Instead of sending it immediately, the browser first sends:

OPTIONS /users/15 HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: DELETE
Enter fullscreen mode Exit fullscreen mode

This informs the server that a DELETE request is about to be made.

If the server approves it, the browser sends the actual request.

Server Response

A typical response might look like:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: DELETE
Enter fullscreen mode Exit fullscreen mode

Once the browser receives this response, it knows that sending the actual request is permitted.

When Is a Preflight Request Sent?

Browsers do not send a Preflight Request for every Cross-Origin request.

Preflight is only required when the request is not a Simple Request.

We'll define what qualifies as a Simple Request in the next article.

CORS vs. Preflight

Although they're closely related, they serve different purposes.

  • CORS determines whether JavaScript is allowed to access the response.
  • Preflight determines whether the browser is allowed to send the actual request in the first place.

In other words, Preflight happens before the request, while CORS enforcement primarily affects access to the response.

In the next article, we'll explore what makes a request "simple" and why only certain requests require a Preflight check.

Top comments (0)