What is CORS and what does it mean?
“CORS” stands for “Cross–Origin Resource Sharing”. It allows you to make requests from one website to another website in the browser.
Servers host web pages, applications, images, and a whole bunch of other stuff. When we use a browser, we are likely to access different websites and go through a lot of online content which may or may not reside on the same server.
“Which brings us to the question of how are we able to access all sorts of web pages on the internet?”
To understand this, we first have to understand two concepts which are, “same-origin” and “cross-origin”.
A browser determines the “origin” of a request as a combination of “Scheme”, “Host” and “Port”.
Scheme
It is the protocol via which we access internet like http://, https://, ftp:// etc.
Host
It is the address of where the resource is located. For example: www.abc.com
Port
It is the communication endpoint where the application is running. For example: PORT: 8080 or 8000.
Same-origin
The “same-origin” policy or standard is very restrictive. If a document resides on server A, then this document can only interact with the other documents stored on server A.
For Example:
https://www.abc.com/zyx.html (URL 1)
https://www.abc.com/pqr.html (URL 2)
According to the same origin policy we can use a browser to go from URL 1 to URL 2 because they have the same origin but it won’t be able to navigate to any other URL outside of this origin.
Cross-origin
A request from a resource outside the origin is known as a “Cross-origin” request. Cross Origin requests however, mean that the servers must implement ways to handle requests from origins outside their own.
For Example:
http://www.abc.com/zyx.html (URL 1)
https://www.edf.com/pqr.html (URL 2)
CORS allows servers to specify who can access its resources and defines a way to access the same.
How CORS manage requests from external sources?
Requests from external sources are handled with the help of “Pre-flight requests”. Most servers will allow a simple “GET” request but may block other requests such as a “PUT” or a “DELETE” request. When any such request like a PUT or DELETE etc is made, a standard pre-flight request is made before its original requests.
The “Pre-Flight request” uses “OPTIONS” as a header and the purpose of this pre flight request is to determine whether the original request is safe or not. The server will respond to the pre-flight request and indicate whether or not the request is safe or not. Now this indication is done by adding “headers”.
A “header” is a piece of information associated with a request or a response.
The CORS Standard manages “cross-origin” requests by adding headers and one such header is “Access-Control-Allow-Origin”. This header is used to indicate whether the response can be shared or not. Other important headers that are added are:
- “Access-Control-Allow-Methods” — A comma-separated list of HTTP methods the web server wishes to permit for cross-origin requests.
- “Access-Control-Allow-Headers” — A comma-separated list of HTTP headers the web server wishes to permit for cross-origin requests.
- If any information from the response header does not match the actual request that was sent, then the browser does not send the actual request preventing unwanted access.
Conclusion
To allow cross-origin access we enable “CORS”. Depending upon which type of request we are sending, different response “Headers” are set in order to bypass the “same origin policy” restriction as it is enabled by default.
To read more tech blogs, please visit knoldus blogs.
