In this blog lets come to the point and discuss everything about pre-flight requests. If you know about pre-flight request and encountered any problem then directly goto end of the page in the solution (heading) else to know please continue.

Technology Stack?

Front-end: React/Angular/JS

Back-end: JAVA/NodeJS/Python/etc

What is Pre-flight requests?

Pre-flight request are the requests send by the web browser before the normal/actual request.

Why Pre-flight request?

According to the W3C specification(For HTTP request methods in particular, other than GET or POST with certain content types), the web browsers first make the preflight (OPTIONS request ) in order to validate whether the supported methods are valid from the server.

Example of Pre-flight request failure?

Failed Pre-flight request

What changes required to correct Pre-flight request failure? Solutions

First of all, if you are making xhr then only you will get these type of request. So, normally in any framework where the browser is sending data in form of ajax / xhr, like in React/Angular. So in this case your backend may/may not have CORS enabled. Let’s see it by NodeJS code.

If cors are enabled then the possible issue is that you have not enabled OPTIONS to request handling from the header. If not so that please add. If you have added then there is a possibility of ordering your middlewares.

//Enabling all preflight request
app.options('*', cors());

//Enabling CORS
app.use(cors());

If CORS not enabled then add Pre-flight request handling on your routes.

//Enabling all preflight request
app.options('*', cors());

// OR
//Enabling all preflight request
app.options('/my-api-path', cors());

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.