How CORS works in plain english?

CORS is used to control access to a remote resource, for example api.foo.com. If we hosted a webpage on site www.foo.com, we can configure remote resource, api.foo.com and tell it should entertain request coming from www.foo.com.

If you make a request from "evil.com" to api.foo.com, you will not be able to do so. Because we never really configure that to happen.

So we have,

www.foo.com --> making GET request to --> api.foo.com.

if www.foo.com is allowed requested to the site, we will  get some response that look like this.


 Request from api.foo.com

=> OPTIONS https://api.foo.com/products
- HEADERS -
Origin: http://www.foo.com
Access-Control-Request-Method: GET

Response from api.foo.com

<= HTTP/1.1 204 No Content
- RESPONSE HEADERS -
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Max-Age: 86400
Access-Control-Allow-Headers: Api-Key
Access-Control-Allow-Origin: http://www.foo.com
Content-Length: 0

From here, we can see that "Access-Control-Allow-Origin" is http://www.foo.com. This means we are given green light to make our request.

If we set "Access-Control-Allow-Origin" to "*", this basically means incoming request to api.foo.com can comee from anywhere and potentially dangerous.


You can always use curl to test out your api.foo.com using the following command :-

curl -H "Origin: https://example.com" https://api.foo.com/

Or using postman.