Question

I’d like to understand this a bit better. The mental model I’m operating with at the moment works something like this:

1. JS hosted at foo.com wishes to access a resource hosted at bar.com. That’s not the sort of thing that browsers like to expose their users to, unless it can be shown that bar.com welcomes this request.
2. So the foo.com JS essentially breaks the request into two halves. First we send a dataless request of the proper kind (GET, POST, etc) via the XMLHttpRequest object. The server at bar.com returns what it would ordinarily respond to basically any request, which might or might not include an Access-Control-Allow-Origin header. (EDIT: This was a misconception – see excellent comment by apsillers below)
3. If the browser does get such a header, it scans it for the Origin (in this case foo.com). If present, it proceeds to send off the actual request that it was asked to send. If not, it refuses. (EDIT: This was also not quite right)

If this model is correct, I’m confused as to why the browser sends out an Origin header with this preliminary request. Doesn’t the checking-for-a-match happen client side? What does sending out this header achieve?

Answer 1

It is how CORS works. It is basically a handshake that says yes you are welcome to talk with me. You can not know if it is possible unless the 3rd party is contacted.

The following is a partial portion of the Preflighted_requests section of the MDN article:

Unlike simple requests (discussed above), “preflighted” requests first
send an HTTP OPTIONS request header to the resource on the other
domain, in order to determine whether the actual request is safe to
send. Cross-site requests are preflighted like this since they may
have implications to user data. In particular, a request is
preflighted if:

It uses methods other than GET or POST. Also, if POST is used to send
request data with a Content-Type other than
application/x-www-form-urlencoded, multipart/form-data, or text/plain,
e.g. if the POST request sends an XML payload to the server using
application/xml or text/xml, then the request is preflighted. It sets
custom headers in the request (e.g. the request uses a header such as
X-PINGOTHER)