CORS-workflow

how does the request flow

tags: learning networking

content

Note

Important: it’s the browser, not the server, enforcing CORS

scenario

• user enter domain.com
• web server of domain.com sends javascripts
• browser executes those javascripts
• coffee.js wants to request api.domain.com
• browser sees the origin of coffee.js (domain.com) is different from what it wants to request (api.domain.com)
• and then:

for a simple get request:

• browser sends the requests with headers:

Origin: https://domain.com
Access-Control-Request-Method: GET

• backend response need to include relevant headers
• otherwise browser blocks coffee.js from reading backend’s response

for a more complicated request (like POST)

• browser stops this POST request
• browser performs a preflight check
• browser makes an OPTIONS request to api.domain.com with headers:

Origin: https://domain.com
Access-Control-Request-Method: POST

• backend of api.domain.com sends back a response with headers:

Access-Control-Allow-Origin: https://domain.com
Access-Control-Allow-Methods: GET, POST

• otherwise browser blocks the request

up

• CORS-what-is-it

down

reference