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
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
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
- Try to avoid setting some extra header in your request
- Try to don’t use cors request
- 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