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.