01 - Anatomy of a Request
In this module, we'll go deeper into discussing the request/response lifecycle and examine how requests interact with our middleware and server.
Anatomy of the Request
It's important to note that there is a lot going on under the hood with requests in general. This complexity is in part to adhere to HTTP protocols and to manage security and traffic between domains. Let's dig in and look underneath the surface a little bit.
When we complete a fetch
here, we are kicking off a multi-step process in this request. It goes something like this:

Analysis
When the method fires off,
fetch()
notifies the browser to send a Pre-Flight fromlocalhost:8080
.The browser fires off an
OPTIONS
request.OPTIONS
is an HTTP verb, likeGET
,POST
,PUT
,DELETE
. Check on the Postman list; you'll see it there. TheOPTIONS
verb allows the client to determine the options associated with our server without having to dig in and do data retrieval or deal with resources in the server. It's an intermediary between domains that says, "Hey, will we be able to do this here if we come in?"The
OPTIONS
HTTP protocol checks in with the middleware on the server for the request type. Essentially if we fire off aGET
request for a certain route from the client, the browser does an initial scan and checks to be sure that the type of request can happen.If the request type is enabled in the server, specifically the headers, the Pre-Flight
OPTIONS
response is sent back with the listing of that request type.If the Pre-Flight
OPTIONS
request determines that the request is allowed, thefetch()
method fires off and the second request for data can be made. Notice theAllow: POST
in the Response. These images are just for display purposes only. You don't need to do anything right now.The
fetch()
script fires off the second request approved by the Pre-Flight request.The second request makes it to the server endpoint, which processes the request.
The server sends back a new response.
The Important Points:
Before it sends off the
GET
orPOST
request to the server, the browser performs apre-flight
check.If everything checks out with our Pre-Flight request, the server responds with a
200 OK
andfetch()
follows with the request/response that has been proclaimed (GET
,POST
,PUT
, etc.), as seen here:
Last updated