Introduction
If you are a front-end developer or even a back-end developer, how many times have you come across the following error:-
This is a frequent error you may face as a web developer. If you notice the error carefully, it will show that the reason is some header of CORS is missing. In this article, we will discuss this essential concept of HTTP requests.
CORS - definition
CORS stands for Cross-Origin Resource Sharing. It is an HTTP header-based mechanism that allows a server to indicate any origins, i.e., domain, scheme, or port
When we enable CORS while designing a back end, then we can request to fetch data from any other domain other than the domains where the back end has been hosted.
For example, if the front end is hosted on the domain https://domain-a.com and makes a request to the back end hosted on https://domain-b.com if CORS is enabled on the back end, then there would be no errors on the front end part owing to missing CORS headers.
Where, and why is CORS used?
Modern web browsers follow numerous security policies to protect user data and privacy. Due to these security reasons, such browsers restrict cross-origin HTTP requests initiated from scripts or applications.
A web application using any API can only request data/resources from the same origin the application was loaded from unless the response from a different origin has the correct CORS headers.
CORS supports secure cross-origin requests, and data transfer between browsers, applications, and servers.
Which requests use CORS?
There is a standard for CORS, known as the cross-origin sharing standard (I will share the link below), which documents which set of headers in the CORS protocol, indicate whether a response can be shared cross-origin.
For requests more involved than what is possible with HTML's form element, a CORS-preflight request is performed. Now, you may have a question here, about what is a CORS-preflight request.
So, what is a CORS-preflight request?
It is a CORS request that checks to see if the CORS protocol is understood by the request from the client.
The following requests use the CORS headers:-
Invocations of the XMLHttpRequest or Fetch APIs
Web Fonts
WebGL textures
Images/Video frames drawn to a canvas
CSS shapes from images
Overview of how CORS works actually
CORS works by adding new HTTP headers which help servers to determine, or rather describe, which origins are permitted to read or request data from the server.
For HTTP requests which can cause side effects to the server, i.e., requests other than GET, the standard requires that browsers do a CORS-preflight request to check if the request contains a valid cross-origin header. Servers can also inform clients if "credentials" (such as cookies or HTTP Authentication) need to be sent with requests.
Conclusion
This brings us to the end of this article. Throughout this entire article, we have learned about the basic topics of CORS and a very brief working logic of CORS. But this is not the end. There is a lot more to CORS than we have read or learned about in the article. To be honest, we have barely scratched the surface. For this reason, I have included some extra resources using which you can learn more about CORS.
Learning about CORS will help you in your web development journey. See you next time.
Extra Learning Resources
[MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
[Fetch API standards](https://fetch.spec.whatwg.org/)
Parting Words
Do give a like and comment if you like the content that I share. Also, consider subscribing to my newsletter so that every time I post a new article you will be the first to be notified of it.
Follow me on:
Keep Learning!