CORS
Planted:
Status: seed
For security purposes, the browser implements the same-origin policy. A website can request data from its own URL. However, data from a different origin is blocked by the browser. CORS (Cross Origin Resource Sharing) is a mechanism that can remove this block.
Origin
A website's origin is its scheme + domain + port. When comparing 2 websites, if any of these is different, they have a different origin.
Request: Same Origin
When a website makes a GET
request, the browser will add an origin property to the request headers.
Its value will be the website's origin.
The server will add an Access-Control-Allow-Origin
property to the response headers.
Its value will be the origin of the resource being requested.
If both values match, the response data will be allowed by the browser.
Request: Different Origin
If the Origin
and Access-Control-Allow-Origin
values don't match, the browser will block the response data.
Request: Allow Cross-Origin
To allow cross-origin requests, middleware can be used on the server to adds specific origins to the response header. This is called whitelisting an origin.
Access-Control-Allow-Origin
can be set to *
.
This value is a wildcard.
It allows any URL to make requests.
Preflight
Some HTTP requests have non-standard headers.
For example; PUT
, PATCH
and DELETE
.
These requests need to be preflighted:
- 1. Before making the primary request, the browser make a different request (a preflight request) using the options HTTP verb.
- 2. The server inspects the origin and request method. It then responds, stating if the primary request is allowed.
- 3. If allowed, the browser makes the primary request.
If you server doesn't allow the request, look for the Access-Control_Allow-Origin
header in the response.
If there is none, you may need to enable CORS on the server.
Note, preflight requests no longer show in the browser's network tab.
Performance
Preflighting means that every request the client is making could actually be 2.
On the server, this can be reduced by adding an Access-Control-Max-Age: 84600
header.
This will cache a preflight for a specified time.
Nick Olinger details another performance approach he used while working at meetup.com
By keeping a website and API on the same origin, you remove the need for perflighting.