What is CORS ? how does it work ?
Welcome! If you’re reading this , I assume you probably came across weird errors related to CORS in the browsers console while making some API calls. Today we will see what are these errors all about and how to fix them.
Our browsers have some security policies so that data transfer would be safe and there are no attacks to corrupt the data before it reaches to end users. One of the policy modern browsers have is called as same-origin policy which simply means that resources that are on the same origin will be accessible to use by the web page.
Now let us understand what is meant by same origin ?
for example we have a websites
These websites does not have the same origin because they have different ports , schemes and domains. A website to have same origin it should have the same scheme , domain and the port number. scheme meaning (https or http) and domain meaning (example.in or example.com). We know that our websites runs on different ports , but port number also needs to be same.
Now let us assume you are requesting from the origin https://localhost:3000 and your resource is present on some other server with origin https://exampleAPI.com/ , you will get CORS error because browsers have same-origin policy and here you are requesting (data, images etc.) from server with different origin.
How do you fix this error ?
This error can be fixed by making some configuration changes on the server from where the resource has been accessed. For exp. you are working on a full stack web application and your frontend is using React JS and backend is having Node JS for APIs. Now , When you will request from client side you will get this error because of origin mismatch. Server needs to specify the allowed origins in the response so that browsers will look into this and will not block them , thus solving CORS errors.
Irrespective of the languages and frameworks we use be it Django , Node or C# in the backend side , we only need to add allowed origin on server config so that server will send a specific parameter Access-Control-Allow-Origin : in the response body.
Here , we can see Access-Control-Allow-Origin : * using this parameter browser will understand the allowed origin to access this resource and * means that any origin can access this resource. We can also have array of allowed origin to access any resource.
Here is the code snippet for the application of CORS in the Node/Express. You need to install cors package using command : npm install cors
Then , you can simply do app.use( ) and pass cors function inside it.
This cors function takes a object as a parameter where you need to add key : value pair origin : * , you can also specify an array of allowed origins as value. Using * is not recommended as it gives access to any origin to get the resources. Always provide an array of allowed origins.
Preflight request
A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.
So , there are basically two types of requests
- Simple Request
- Preflight Request
Requests which uses methods like GET , HEAD , POST comes under simple requests because these requests does not make and side effects on the data present on the server side. GET request at most will fetch the data from the server where as POST request will create new data on server side but none of them can alter the data which is already present on server.
Requests which uses methods like DELETE or PUT comes under preflight requests because using these methods anyone can modify or delete the data which is present at server side and thus side effects. Browser before sending the actual requests , they sends preflight requests with access-control-allow-methods and access-control-allow-headers which is used as a check to know if the sever allows these methods. Are these operations allowed to do ? If server sends the 200 status stating that preflight request is verified then browser sends the actual request.
Hope now you have a good understanding of CORS and you guys will be able to fix this error. Keep Learning !
Also if you would like to connect with me here is the LinkedIn profile – https://www.linkedin.com/mwlite/in/avinash-varpeti-4300b4172
