---
title: "Solve \"Cross-Origin Request Blocked\" in React frontend to an Express.js API?"  
description: "Solve \"Cross-Origin Request Blocked\" in React frontend to an Express.js API?"  
author: "Sandra Emily"  
published: 2023-08-03  
updated: 2023-08-04  
canonical: https://www.mindstick.com/forum/159450/solve-cross-origin-request-blocked-in-react-frontend-to-an-express-js-api  
category: "javascript"  
tags: ["error", "reactjs", "express js"]  
reading_time: 2 minutes  

---

# Solve "Cross-Origin Request Blocked" in React frontend to an Express.js API?

Solve "[Cross](https://www.mindstick.com/forum/33892/how-to-handle-cross-thread-exception-in-winforms)-[Origin](https://www.mindstick.com/forum/160458/access-control-allow-origin-in-asp-dot-net-core-6) [Request Blocked](https://www.mindstick.com/forum/159417/how-to-solve-the-website-encounters-a-cross-origin-request-blocked-error)" in [React frontend](https://www.mindstick.com/forum/159280/describe-the-process-of-making-an-api-call-from-a-react-frontend-to-a-node-js-backend) to an Express.js [API](https://www.mindstick.com/articles/12641/instagram-api-upgraded-to-facebook-graph)?

## Replies

### Reply by Aryan Kumar

There are a few ways to solve the cross origin [request](https://www.mindstick.com/blog/255/post-get-and-request-function-in-php) blocked error in [React](https://www.mindstick.com/articles/327892/react-why-it-just-makes-sense-for-web-development) [frontend](https://www.mindstick.com/blog/155256/popular-reasons-that-make-javascript-the-ideal-fit-for-startups) to an Express.js API.

One way is to use the `Access-Control-Allow-Origin` header in the Express.js API. This header tells the browser that the API is allowed to be accessed from any origin. To do this, you need to add the following header to the response:

```plaintext
Access-Control-Allow-Origin: *
```

The `*` wildcard allows requests from any origin. You can also specify a specific origin if you want to restrict access to only that origin.

Another way to solve the cross origin request blocked error is to use the `CORS` middleware in Express.js. The CORS middleware automatically adds the `Access-Control-Allow-Origin` header to the response, as well as other headers that are required for cross origin requests. To use the CORS middleware, you need to install the `cors` package and then add the following code to your Express.js app:

```plaintext
const cors = require('cors');

const app = express();

app.use(cors());

app.get('/api/users', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000);
```

Finally, you can also solve the cross origin request blocked error by using the `proxy` property in the package.json file of your React app. The `proxy` property tells the React app to use a proxy server to make requests to the API. This can be helpful if you are developing your React app locally and the API is running on a different server. To use the `proxy` property, you need to add the following line to your package.json file:

```plaintext
"proxy": "http://localhost:3000"
```

This line tells the React app to use the proxy server at `http://localhost:3000` to make requests to the API. The proxy server will automatically add the `Access-Control-Allow-Origin` header to the response, so you don't need to worry about adding it yourself.


---

Original Source: https://www.mindstick.com/forum/159450/solve-cross-origin-request-blocked-in-react-frontend-to-an-express-js-api

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.