Ask First

Preflight Request

The browser asks first with an OPTIONS request.

highlighted = computed this step

The browser asks first with OPTIONS

The request line uses OPTIONS for the toy API path.

OPTIONS /api\text{OPTIONS /api}
Preflight requestThe preflight request, allow response, and checks are recomputed from pinned bytes.Preflight request - OPTIONS /api asks for POST; response 204 No Content allows itsectionnamevaluecheckrequest linemethodOPTIONSpreflightrequest linepath/apiparsedrequest lineversionHTTP/1.1parsedheaderHostapi.exampleexactheaderOriginhttps://app.exampleaskedheaderAccess-Control-Request-MethodPOSTaskedbodybyte length0emptystatusversionHTTP/1.1parsedstatusstatus204 No Contentno contentheaderAccess-Control-Allow-Originhttps://app.exampleallows originheaderAccess-Control-Allow-MethodsPOSTallows methodheaderContent-Length0empty bodybodybyte length0countedcheckorigin matches allow-originyesallowedcheckrequested method is allowedyesallowedcheckstatus204 No Contentno contentchecksent body bytes0empty

The Host row names api.example

The request still names the server host like other HTTP requests.

Host=api.example\text{Host}=\text{api.example}
Preflight requestThe preflight request, allow response, and checks are recomputed from pinned bytes.Preflight request - OPTIONS /api asks for POST; response 204 No Content allows itsectionnamevaluecheckrequest linemethodOPTIONSpreflightrequest linepath/apiparsedrequest lineversionHTTP/1.1parsedheaderHostapi.exampleexactheaderOriginhttps://app.exampleaskedheaderAccess-Control-Request-MethodPOSTaskedbodybyte length0emptystatusversionHTTP/1.1parsedstatusstatus204 No Contentno contentheaderAccess-Control-Allow-Originhttps://app.exampleallows originheaderAccess-Control-Allow-MethodsPOSTallows methodheaderContent-Length0empty bodybodybyte length0countedcheckorigin matches allow-originyesallowedcheckrequested method is allowedyesallowedcheckstatus204 No Contentno contentchecksent body bytes0empty

The preflight request body is empty

The body length row is 0 because the question is carried by headers.

request body bytes=0\text{request body bytes}=0
Preflight requestThe preflight request, allow response, and checks are recomputed from pinned bytes.Preflight request - OPTIONS /api asks for POST; response 204 No Content allows itsectionnamevaluecheckrequest linemethodOPTIONSpreflightrequest linepath/apiparsedrequest lineversionHTTP/1.1parsedheaderHostapi.exampleexactheaderOriginhttps://app.exampleaskedheaderAccess-Control-Request-MethodPOSTaskedbodybyte length0emptystatusversionHTTP/1.1parsedstatusstatus204 No Contentno contentheaderAccess-Control-Allow-Originhttps://app.exampleallows originheaderAccess-Control-Allow-MethodsPOSTallows methodheaderContent-Length0empty bodybodybyte length0countedcheckorigin matches allow-originyesallowedcheckrequested method is allowedyesallowedcheckstatus204 No Contentno contentchecksent body bytes0empty

Summary

The preflight request asks permission before the later method is sent.

preflight request checked\text{preflight request checked}
Preflight requestThe preflight request, allow response, and checks are recomputed from pinned bytes.Preflight request - OPTIONS /api asks for POST; response 204 No Content allows itsectionnamevaluecheckrequest linemethodOPTIONSpreflightrequest linepath/apiparsedrequest lineversionHTTP/1.1parsedheaderHostapi.exampleexactheaderOriginhttps://app.exampleaskedheaderAccess-Control-Request-MethodPOSTaskedbodybyte length0emptystatusversionHTTP/1.1parsedstatusstatus204 No Contentno contentheaderAccess-Control-Allow-Originhttps://app.exampleallows originheaderAccess-Control-Allow-MethodsPOSTallows methodheaderContent-Length0empty bodybodybyte length0countedcheckorigin matches allow-originyesallowedcheckrequested method is allowedyesallowedcheckstatus204 No Contentno contentchecksent body bytes0empty