CORS REQUESTING TWO REQUEST:-

While working on Shopify app we found that in network tab whenever we call any request one extra request is automatically fired by the browser with the method “OPTIONS”. And “OPTIONS” is always the first request will call by the browser and after that, a correct request is sent to the server, check the screenshot below

And this bit little confusing for me because one extra request is made on your server increase the payload of your server also may slow your server if you are not handling this in the correct manner after reading many docs we found that it’s a normal behavior of HTTP while making the request through cors.

You can learn about it from here

https://developer.mozilla.org/en-US/docs/Glossary/CORS

https://developer.mozilla.org/en-US/docs/Glossary/HTTP

While performing cors user agent need to get some permission to access selected resources from other servers.

As we check in above screen there is two request made by the browser,

The first request is called  “Preflight request”,

So the question is arise that what is Preflight request .

So Preflight request is a CORS request that checks to see if the CORS protocol is understood.

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

you can read about it from here

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

Preflight request is called in the case of you are calling POST, PUT, PATCH, DELETE method,

And Also some time called with GET method too if you add some custom header in your request see screenshot below

if we check our header in below screenshot we request some extra header we set and “CORS, HTTP” want to verify that is we handle this header or not that’s why preflight request sent

So question is that is preflight request is good or bad?

According to me, sometimes this request is good because before calling the original request cors know that original request is valid or not,

But the bad thing is that its increase load on cors server.

So how can we handle this request

1. Try to avoid setting some extra header in your request
2. Try to don’t use cors request
3. if in case cors request using then handle “option” method very well like not perform any type of database execution or other things just return true, it may overcome your extra load on your database server

Hope you understand now why two requests made on cors HTTP

you can find some helpful link bellow

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS
2. https://developer.mozilla.org/en-US/docs/Glossary/CORS
3. https://stackoverflow.com/questions/24704638/options-request-makes-application-2x-slower