Skip to Content
Navigation:

A stick figure smiling

Here's a preview from my zine, HTTP: Learn your browser's language!! If you want to see more comics like this, sign up for my saturday comics newsletter or browse more comics!

Image of a comic. To read the full HTML alt text, click "read the transcript".

browse more comics! get the zine!
read the transcript!

cross-origin resource sharing

Cross-origin requests are not allowed by default: (because of the same origin policy!)

Javascript from clothes.com: POST request to api.clothes.com?

Firefox (thought bubble): same origin flow chart

Firefox: NOPE. api.clothes.com is a different origin from clothes.com

If you run api.clothes.com, you can allow clothes.com to make requests to it using the Access-Control-Allow-Origin header. Here’s what happens:

javascript on clothes.com: POST /buy_thing
Host: api.clothes.com

Firefox (thought bubble): That’s cross-origin. I’m going to need to ask api.clothes.com if this request is allowed.

Firefox: OPTIONS /buy_thing
Host: api.clothes.com (“hey, what requests are allowed?” preflight request)

api.clothes.com: 204 No Content`` Access-Control-Allow-Origin: clothes.com```

Firefox (thought bubble): cool, the request is allowed!

Firefox: POST /buy_thing
Host: api.clothes.com
Referer: clothes.com/checkout

api.clothes.com: 200 OK
{"thing_bought": true}

This OPTIONS request is called a “preflight” request, and it only happens for some requests, like we described in the diagram on the same-origin policy page. Most GET requests will just be sent by the browser without a preflight request first, but POST requests that send JSON need a preflight.

Saturday Morning Comics!

Want another comic like this in your email every Saturday? Sign up here!

I'll send you one of my favourite comics from my archives every Saturday.
© Julia Evans 2024 | All rights reserved (see the FAQ for notes about licensing)