Fix CORS Error: Access-Control-Allow-Origin header missing in Express

This error occurs when a browser blocks a cross-origin request because the server response lacks the Access-Control-Allow-Origin header. Fix it by installing and configuring the cors middleware in your Express app, specifying allowed origins, methods, and headers for your frontend domain.

Reading the Stack Trace

Here's what each line means:

• No 'Access-Control-Allow-Origin' header is present on the requested resource.: The browser enforced the same-origin policy because the server did not include the required CORS header.
• from origin 'http://localhost:3000': The frontend runs on port 3000, but the API is on port 4000, making this a cross-origin request.
• at XMLHttpRequest.handleError (node_modules/axios/lib/adapters/xhr.js:162:14): Axios caught the blocked request and threw a Network Error since the browser prevented the response from being read.

Common Causes

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

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

app.listen(4000);

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

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

app.use(cors()); // Too late - routes already defined above

The Fix

Install the cors package and add it as middleware before your routes. Configure it with the specific origin of your frontend to allow cross-origin requests while keeping the API secure.

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

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

app.listen(4000);

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

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

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

app.listen(4000);

Testing the Fix

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

describe('CORS configuration', () => {
  let app;

  beforeEach(() => {
    app = express();
    app.use(cors({
      origin: 'http://localhost:3000',
      methods: ['GET', 'POST', 'PUT', 'DELETE'],
      allowedHeaders: ['Content-Type', 'Authorization']
    }));
    app.get('/api/users', (req, res) => {
      res.json([{ id: 1, name: 'Alice' }]);
    });
  });

  it('includes Access-Control-Allow-Origin header', async () => {
    const response = await request(app)
      .get('/api/users')
      .set('Origin', 'http://localhost:3000');
    expect(response.headers['access-control-allow-origin']).toBe('http://localhost:3000');
  });

  it('responds to preflight OPTIONS request', async () => {
    const response = await request(app)
      .options('/api/users')
      .set('Origin', 'http://localhost:3000')
      .set('Access-Control-Request-Method', 'POST');
    expect(response.status).toBe(204);
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/cors-configuration,git add src/app.js src/__tests__/cors.test.js package.json,git commit -m "fix: add CORS middleware for cross-origin API access",git push origin fix/cors-configuration

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test
      - run: npm run lint

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

const { initBugStack } = require('bugstack-sdk')

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Install the cors package with npm install cors.
2. Open a pull request with the CORS middleware configuration.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review the allowed origins to ensure they match your deployment domains.
5. Merge to main and verify cross-origin requests work in staging.

Frequently Asked Questions