What is CORS policy & how to solve it?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

For Better Understanding, I am using a simple Express.js project for API calls. You can also use others for API calls. I am serving the server in port 3000.

const express = require('express');

const app = express();

app.get("/data", (req, res) => {
    res.json({
        name: "Siam",
        description:"I am a software engineer"
    })
})

app.listen(3000);

for the client side, I am using a Basic HTML template like the given below. there this a script and in there I have the function named fetechData. In that function, i am calling that API that I created using express above

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fetchData()">Get Data</button>
    <script src="./script.js"></script>
</body>
</html>

In my script file, I have an API call and for the API call, I am using fetch. Usually, we don't need to say the method type if it gets because by default fetch uses the get method but for better understanding, I am adding the method in the fetch.

async function fetchData() {
    const response = await fetch("http://localhost:3000/data", { method: "GET" });

    const data = await response.json();
    console.log(data)
}

Now our project is ready to work. if I run the HTML file we can see there is a button name get data. If we press then we will see in the console that

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

This actually happened because if the client domain and the server site domain are different then it

breaks the CORS Policy. Then what is the CORS Policy?

Basically, It is a browser Policy. If One site is sending a request to another server the server then it must be send the request from the same domain or else it will violate the CORS Policy and the browser will reject the request. If we check the network tab in the browser we can see that in the header the is no Access-Control-Allow-Origin present. For getting this we cant get it from the client side unless the serverside resolves this issue

This error only can be handled in the server-side code or backend code.

On the server-side, It must allow the domain(our project domain) in the response header.

If we want to solve this in our code we should follow the given example.

we have to install the cors package using this command

npm i cors

then we have to modify our code

const express = require('express');
const cors=require('cors');

const app = express();
app.use(cors({
	origin:"127.0.0.1:5500"
}))

app.get("/data", (req, res) => {
    res.json({
        name: "Siam",
        description:"I am a software engineer"
    })
})

app.listen(3000);

wow, we just fixed the error. we are just allowing the origins from where we will accept the API calls. If there are multiple platforms we should bind them in an array.

app.use(cors({
	origin:["127.0.0.1:5500","127.0.0.1:5501"]
}))

If we want to create a public API we can use the "*" in the origin

app.use(cors({
	origin:*
}))
//for express we can also use 
app.use(cors())

THIS IS HOW WE CAN SOLVE THE CORS POLICY ERROR

In Addition

There is something different in the PUT API call. rest are the same but in the PUT API call, they send a preflight request it checks whether he is accessible to send data or not. The preflight uses send method name "options".

if we check the header in the console we will see that Access-Control-Allow-Methods: GET, HEAD, PUT, PATCH. It is set by that package. On the other hand, if we want to provide more security we can also set what type of method we are accepting from that origin

const express = require('express');
const cors=require('cors');

const app = express();
app.use(cors({
	origin:"127.0.0.1:5500",
  	methods:["GET","POST]
}))

app.get("/data", (req, res) => {
    res.json({
        name: "Siam",
        description:"I am a software engineer"
    })
})

app.listen(3000);

From the above example, we can see that we are only accepting the GET & POST method from that origin(127.0.0.1:5500). If someone tries to PUT or DELETE it will again return that CORS policy error.

There are so many things we can also do but only for the basic cases I try to explain why cors policy error occurs

thanks for reading the article it was inspired by Learn with Sumit - LWS - Bangladesh

What is CORS policy & how to solve it?

Grepper

Documentation

Social

Legal

Contact