Two things developers hate the most:
1. Meetings that could've been an email
2. CORS
We'll talk about the first one later but let's see what CORS (not even a word) is.
Stands for Cross-Origin Resource Sharing.
It is a security feature implemented by web browsers that controls how web pages from one domain can request resources hosted on another domain.
Browsers generally have a Same-Origin Policy, which means requesting data from the same origin is allowed but requesting data from another URL will throw an error.
But why so? Due to security reasons.
This policy restricts the web page's ability to access data or resources from other origins to prevent potential security vulnerabilities, like cross-site scripting (XSS) attacks.
How to make a Cross-Origin request?
When the browser makes a cross-origin request, it will add an ‘Origin’ header that states the scheme(protocol), domain, and port number.
In return, the server responds with Access-Control-Allow-Origin — specifying the allowed origin(s). It can be set to a specific origin, "*", or omitted.
However, HTTP requests other than GET, POST, and HEAD require a preflight request before making an actual Cross-Origin request.
A preflight request is nothing but an OPTIONS HTTP request to check if the actual request is allowed.
The server responds with an ‘Access-Control-Allow-Methods’ header which states the HTTP Methods allowed to be used by the origin.
CORS is confusing but necessary for security.
It's nothing but a combination of HTTP headers, preflight requests, and browser checks to control and allow safe cross-origin requests while maintaining the security of web applications.
ALT Infographic explaining CORS.