CORS Explained: Browser Rules for Reading Responses from Another Origin

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Identify the page origin

   0:18

   The scheme, host and port determine an origin.

   On-screen labels: Scheme; Host; Port.

2. 2

   Step 2: Compare the destination

   0:30

   A different origin can require cross-origin access permission.

   On-screen labels: Page origin; Resource origin; Cross-origin request.

3. 3

   Step 3: The browser checks access

   0:42

   Browser rules restrict scripts reading responses across origins.

   On-screen labels: Frontend script; Browser enforcement; Response access.

4. 4

   Step 4: The server supplies headers

   0:54

   The resource server indicates which origins may access its response.

   On-screen labels: Response headers; Allowed origin; Relevant resource.

5. 5

   Step 5: Some requests are preflighted

   1:06

   The browser may first ask whether the intended method and headers are allowed.

   On-screen labels: Preflight request; Intended method; Intended headers.

6. 6

   Step 6: Diagnose the exact exchange

   1:18

   Review the error, origin and server configuration with the developer.

   On-screen labels: Browser error; Actual response; Intended access policy.

Common questions

Go further