# Fix The CORS Error From Frontend

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1639214258759/chhrnQRzj.png)

When developers start integrating APIs on the frontend and if frontend and backend(APIs) running on a different domain/subdomain/port/ then we face a CORS issue.

#### CORS —

It is an HTTP-header-based implementaion. browsers uses mechanism of preflight request . in preflight request to server it checks that ther server will permit actual request or not. if server does not permit than browser shows CORS error.

### Ways to Fix it from Frontend

In a real way, CORS should be enabled from the backend server itself by setting correct HTTP-headers and allowing concerned domains.

but sometimes we want to bypass this check from the frontend itself. in this case, we can use the below-mentioned fixes.

1.  **Using ModHeader Chrome Extension**
2.  **By Creating a mocked server**

### **Using ModHeader-**

1.  install ModHeader extension in the browser. just search modHeader extension and add it to your browser.

2\. Add response header, and set “Acess-Control-Allow-Origin” to “\*” then refresh your web page. it will start fetching data without any CORS error.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1639214260659/ckfzeu_WR.png)

### **By Creating a mocked server**

Another solution is to create a simple express server with node and set

“Acess-Control-Allow-Origin” to “\*” and from there redirect fetch request to the server.

Create a folder in your system and add a file app.js inside it and put the below code inside this file.

Changes need to make in your frontend code

Call API with base URL — [http://localhost:3000](http://localhost:3000)

your API call will look like [http://localhost:3000](http://localhost:3000)/endpointsofAPI

and in app.js file update “APIBaseURL” this with actual base URL of your API.

**Code**


```
const express = require(‘express’);  
const request = require(‘request’);

const app = express();

app.use((req, res, next) => {  
 res.header(‘Access-Control-Allow-Origin’, ‘\*’);  
 next();  
});

app.use(‘/’, (req, res) => {  
 const endPoint = req.url;  
 console.log(endPoint)  
 request(  
 { url: \`APIBaseURL{endPoint}\` },  
 (error, response, body) => {  
 if (error || response.statusCode !== 200) {  
 console.log(error)  
 return res.status(500).json({ type: ‘error’, message: error?.message });  
 }  
 res.json(JSON.parse(body));  
 }  
 )  
});

const PORT = process.env.PORT || 3000;  
app.listen(PORT, () => console.log(\`listening on ${PORT}\`));

``` 


**install packages-**

Create a package.json file with same level of app.js and put below code


```
{  
 “name”: “server”,  
 “version”: “1.0.0”,  
 “description”: “”,  
 “main”: “app.js”,  
 “scripts”: {  
 “test”: “echo \\”Error: no test specified\\” && exit 1"  
 },  
 “author”: “Anil Verma”,  
 “license”: “ISC”,  
 “dependencies”: {  
 “express”: “⁴.17.1”,  
 “request”: “².88.2”  
 }  
}

``` 


**Running Server —**   
open terminal and run command  
**npm i**  
once the above command completes installing packages then run the below command  
**node app.js**

After that refresh your webpage, it will start fetching data without any CORS error.

Happy Coding…