How to Fix CORS Errors in React and Node.js: A Complete Guide
DEV Community

How to Fix CORS Errors in React and Node.js: A Complete Guide

Have you ever built a React application, connected it to a Node.js API, and suddenly encountered a CORS error in your browser? Your backend might be running correctly, your API endpoint might return valid data, and yet your frontend cannot access the response.

This is a common problem when developing web applications that use separate frontend and backend servers. In this guide, you'll learn how to fix CORS errors in React and Node.js, why they occur, how to configure your backend correctly, and how to troubleshoot common issues with practical code examples.

What Is a CORS Error?

CORS stands for Cross-Origin Resource Sharing. It is a browser security mechanism that controls whether a web page can access resources from a different origin.

An origin consists of three parts:

  • Protocol, such as http or https
  • Hostname, such as localhost or example.com
  • Port, such as 3000 or 5000

For example, consider this development environment:

  • React frontend: http://localhost:3000
  • Node.js backend: http://localhost:5000

Although both applications run on your computer, they use different ports. Therefore, they have different origins. When React sends a request to the Node.js API, the browser checks whether the backend allows requests from the frontend's origin. If the necessary CORS headers are missing or incorrect, the browser may block JavaScript from accessing the response.

Important: CORS is enforced by browsers. It is not a replacement for authentication, authorization, or other server-side security controls.

Why Do CORS Errors Occur in React and Node.js?

Before learning how to fix CORS errors, it helps to understand their common causes.

  • Missing CORS headers: The backend does not return the required Access-Control-Allow-Origin header.
  • Incorrect origin configuration: The backend allows http://localhost:3000, but the React application runs on a different port or hostname.
  • Failed preflight requests: For certain cross-origin requests, the browser sends an OPTIONS request before the actual request. If the server does not handle this preflight correctly, the browser may block the request.
  • Credentials are configured incorrectly: Requests that include cookies or HTTP authentication require specific CORS settings. For example, credentialed requests cannot use Access-Control-Allow-Origin: *.
  • Middleware is configured in the wrong order: If authentication or another middleware rejects an OPTIONS request before CORS headers are added, the browser may report a CORS error.

Now, let's look at practical solutions.

Method 1: Fix CORS Errors Using the Express CORS Middleware

The simplest solution for many Express applications is to use the cors middleware.

Step 1: Install the required packages. Open your Node.js backend project and run:

npm install express cors

The express package creates the backend server, while cors helps configure the appropriate CORS response headers.

Step 2: Configure CORS in your Node.js server. Create or update your server.js file:

const express = require("express");
const cors = require("cors");
const app = express();
app.use(
  cors({
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);
app.use(express.json());
app.get("/api/users", (req, res) => {
  res.json([
    { id: 1, name: "Aman" },
    { id: 2, name: "Priya" },
  ]);
});
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

In this example, the backend allows requests from the React development server at http://localhost:3000. The middleware also specifies permitted HTTP methods and request headers. Express's CORS middleware handles standard preflight requests for supported routes.

Why does this work? The middleware adds the necessary CORS headers to responses. The browser can then determine whether the React application is permitted to access the response.

Keep the origin consistent with the actual address of your frontend. If your React application runs on port 5173, for example, update the allowed origin accordingly.

Step 3: Restart your backend server. After changing your configuration, restart the Node.js application.

node server.js

If you're using a development tool such as Nodemon, it may restart automatically.

Method 2: Connect React to the Node.js API

Once the backend is configured, make a request from your React application. For example, create a component that fetches users from the backend:

import { useEffect, useState } from "react";
function Users() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState("");
  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await fetch("http://localhost:5000/api/users");
        if (!response.ok) {
          throw new Error("Failed to fetch users");
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      }
    }
    fetchUsers();
  }, []);
  if (error) {
    return <>Error: {error}</>;
  }
  return (
    <div>
      <h2>User List</h2>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}
export default Users;

When the backend is configured correctly and both applications are running, the React component should display the user list.

Remember that a failed network request can have several causes. If the request still fails, inspect the browser's Network tab and the backend logs rather than assuming every failure is a CORS problem.

Method 3: Handle CORS Errors With Credentials

Some applications need to send cookies or session information with API requests. In that situation, the frontend and backend must be configured to support credentials.

Backend configuration. Update the Express middleware:

const cors = require("cors");
app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

React request. Use the credentials option in your fetch request:

fetch("http://localhost:5000/api/profile", {
  method: "GET",
  credentials: "include",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

The credentials: "include" option allows the browser to include eligible credentials, subject to cookie settings and browser policies. For this configuration to work, the server must return the appropriate Access-Control-Allow-Credentials: true header and a specific allowed origin. A wildcard origin is not valid for credentialed CORS requests.

Also, CORS settings alone do not guarantee that cookies will be sent. Cookie attributes, HTTPS requirements, and browser third-party cookie policies can affect the result.

Method 4: Fix CORS Preflight Errors

A preflight request is an OPTIONS request that the browser sends to check whether the actual cross-origin request is permitted. Preflight requests commonly occur when you use methods such as PUT or DELETE, or send certain custom headers, including an Authorization header.

For example, a React application might send a request like this:

fetch("http://localhost:5000/api/users/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer YOUR_TOKEN",
  },
  body: JSON.stringify({ name: "Updated User" }),
});

If you're using Express with the standard cors middleware mounted globally before your routes, it normally handles preflight requests automatically.

app.use(
  cors({
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

If your application has custom routing, authentication middleware, or a reverse proxy, check whether the OPTIONS request is being rejected before the CORS middleware can respond.

Do not fix preflight issues by blindly allowing every origin or disabling security checks.

Method 5: Use a Development Proxy in React

When developing locally, a proxy can simplify API requests by routing them through the React development server. This can be useful when you want to avoid direct cross-origin requests during development.

For example, if you're using Create React App, add the following setting to your package.json:

{ "proxy": "http://localhost:5000" }

Then request the API using a relative URL:

fetch("/api/users")
  .then((response) => response.json())
  .then((data) => console.log(data));

The development server forwards the request to the backend. If you're using Vite, configure its development server instead:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
      },
    },
  },
});

Restart the development server after changing the configuration.

Note: A development proxy is not a universal production fix. Your production frontend and backend must still be deployed with a suitable routing and security configuration.

Common CORS Errors and Their Solutions

Here are some errors developers frequently encounter when connecting React to a Node.js backend.

  • No Access-Control-Allow-Origin header: Missing or incorrect CORS configuration. Configure CORS on the backend.
  • Origin is not allowed: Frontend origin does not match the server configuration. Check protocol, hostname, and port.
  • Preflight request fails: OPTIONS request is rejected or required headers are missing. Review middleware order and preflight responses.
  • Wildcard origin with credentials: Credentials are enabled while the allowed origin is *. Specify an explicit origin.
  • Network error in React: Could be CORS, server downtime, DNS, or a connection issue. Check the Network tab and backend logs.
  • Works locally but fails in production: Production origin or proxy configuration differs. Verify the deployed domains and server settings.

How to Debug CORS Errors Step by Step

If you've applied the solutions above but your application still fails, follow this checklist.

  1. Step 1: Open the browser console. Look for the complete CORS error message. It often identifies the missing header or the origin that was rejected.
  2. Step 2: Inspect the Network tab. Open your browser's developer tools, select Network, and reproduce the request. Check both the actual request and any preceding OPTIONS request.
  3. Step 3: Verify the backend URL. Confirm that React is requesting the correct hostname, port, protocol, and API path.
  4. Step 4: Check the response headers. Look for Access-Control-Allow-Origin and, when applicable, Access-Control-Allow-Methods, Access-Control-Allow-Headers, and Access-Control-Allow-Credentials.
  5. Step 5: Review middleware order. Ensure CORS middleware runs before routes or middleware that might terminate the request without adding the required headers.
  6. Step 6: Check the server response. A backend error, authentication redirect, or reverse-proxy response can also lack the expected CORS headers. Review server logs to identify the underlying issue.

Frequently Asked Questions

How do I fix CORS errors in React and Node.js?

Configure CORS on the Node.js backend using the Express cors middleware. Allow the correct React frontend origin, configure required methods and headers, and ensure preflight requests are handled properly.

Why am I getting a CORS error even though my API works in Postman?

Postman does not enforce browser CORS restrictions in the same way as a web browser. An API request can succeed in Postman while the browser blocks React from accessing the response.

Can I fix a CORS error from React alone?

Usually, no. CORS permission must be provided by the server or an appropriate proxy. Changing frontend request code cannot force a server to authorize a cross-origin request.

Is it safe to use origin: "*" in Express?

It depends on the application. A wildcard can be appropriate for intentionally public, non-credentialed APIs. For private APIs or applications that use cookies, use a specific trusted origin and implement proper authentication and authorization.

Why does my CORS configuration work locally but fail after deployment?

Your production frontend may use a different domain, HTTPS protocol, or proxy configuration. Update the allowed origin to match the deployed frontend and verify that errors from the production server also include the necessary CORS headers.

Conclusion

CORS errors are common when building applications with React and Node.js, but the solution becomes easier once you understand how browsers handle cross-origin requests. Start by checking the frontend origin, configuring the Express cors middleware, and verifying your API requests in the browser's Network tab.

If your application uses cookies, custom headers, or a development proxy, review those settings separately. Instead of disabling security controls to make an error disappear, identify the exact reason the browser is rejecting the request and configure your application accordingly. With the right setup and debugging process, you can resolve most React and Node.js CORS issues and build a more reliable web application.

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.