What is external middleware?

External middleware is middleware that comes from a third-party package — not built into Express. You install it with npm and import it into your project.

In this section, we’ll use the cors package to fix a common browser error.

What is CORS?

If you’ve tried to call an API from a website, you might have encountered this error:

Access to fetch at 'https://api.example.com/data' from origin 'https://mywebsite.com' has been blocked by CORS policy

CORS stands for Cross-Origin Resource Sharing. It’s a browser security feature that prevents websites from making requests to a different origin unless the server allows it.

What is an “origin”? An origin consists of three parts:

  • Protocol: http:// or https://
  • Domain: The website address (like localhost, google.com, or myapi.com)
  • Port: The specific port number (like :3000, :5173, or :80)

Examples of different origins:

  • http://localhost:3000 (your backend API)
  • http://localhost:5173 (your frontend app)
  • https://mywebsite.com (production website)
  • https://api.example.com (external API)

Even if only one part is different, they’re considered different origins and the browser will block requests between them.

For example:

  • Your frontend is running on http://localhost:5173
  • Your backend API is running on http://localhost:3000
  • These are different origins (same protocol and domain, but different ports) → the browser blocks the request

How to fix it

The server (your Express API) must tell the browser: “Yes, I allow requests from that origin.”

How does this work?

  1. When your frontend makes a request to your backend, the browser checks if they’re from the same origin
  2. If they’re different origins, the browser sends the request but waits for permission from the server
  3. The server responds with special HTTP headers that tell the browser whether the request is allowed
  4. If the headers say “yes”, the browser allows your frontend to access the response
  5. If the headers say “no” (or are missing), the browser blocks the request and shows a CORS error

The special headers the server sends:

  • Access-Control-Allow-Origin - Which origins are allowed to make requests
  • Access-Control-Allow-Methods - Which HTTP methods (GET, POST, etc.) are allowed
  • Access-Control-Allow-Headers - Which headers the frontend can send

You can see these headers in your browser’s developer tools under the Network tab when making requests to your API. Look for the “Response Headers” section. There is more on headers later in this lesson.

The easy way: You could manually add those headers yourself, but it’s easier and safer to use the cors middleware, which handles all of this automatically.

Using the cors package

Step 1: Install the package

npm install cors
npm install -D @types/cors

Why two packages?

  • cors - The actual middleware that handles CORS headers
  • @types/cors - TypeScript type definitions for the cors package

Why use -D (or --save-dev)?

  • The -D flag installs @types/cors as a development dependency
  • Type definitions are only needed during development for TypeScript compilation
  • They’re not needed in production since TypeScript compiles to JavaScript
  • This keeps your production bundle smaller

Step 2: Enable CORS for all routes

import express, { Request, Response } from "express";
import cors from "cors";

const app = express();

// Enable CORS
app.use(cors()); // Adds CORS headers to every response

app.get("/", (req, res) => {
  res.json({ message: "Hello world!" });
});

What the cors middleware actually does

When you use app.use(cors()), it:

  • Looks at the Origin header on incoming requests
  • Adds the Access-Control-Allow-Origin: * header to the response
  • Tells the browser: “It’s OK to access this resource from any origin”

This removes the CORS error — but be careful:

  • * means “allow all origins” (good for development, not always for production)
  • You can configure it to allow only specific origins if needed:
app.use(cors({ origin: "https://myfrontend.com" }));


Repo link

Tags: