How to Fix “Blocked by CORS Policy” Error in JavaScript (Step-by-Step Guide)

Emily Scott — Sat, 21 Feb 2026 04:34:20 +0000

If you are building a web application and see this error in your browser
console:

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

This is one of the most common issues beginners face when working with
JavaScript and APIs.

In this article, you will learn:

What CORS is
Why this error happens
How to fix it in Node.js (Express)
How to fix it in PHP
Best practices for production

What Is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security feature.

A request is considered cross-origin when:

Your frontend runs on http://localhost:3000
Your backend runs on https://api.example.com

Because these origins are different, the browser blocks the request
unless the server explicitly allows it.

Important: CORS is enforced by the browser, not by the server.

Why the CORS Error Happens

CORS errors occur because the backend server does not send the correct
HTTP headers.

The browser checks for headers like:

Access-Control-Allow-Origin

If the header is missing, the browser blocks the request.

This means you cannot fix CORS from the frontend alone.
It must be configured on the backend.

Solution 1: Fix CORS in Node.js (Express)

First, install the CORS middleware:

npm install cors

Then update your Express server:

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

const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: "CORS is fixed!" });
});

app.listen(5000, () => console.log("Server running on port 5000"));

Restart the server and test your request again.

Solution 2: Fix CORS in PHP

If you are using PHP, add the following headers at the top of your PHP
file:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
?>

This allows cross-origin requests.

Important: Do Not Use “*” in Production

Using:

header("Access-Control-Allow-Origin: *");

Allows requests from any domain.

In production, it is safer to specify your domain:

header("Access-Control-Allow-Origin: https://yourdomain.com");

Why Postman Works But the Browser Fails

You may notice:

Postman works
Browser fails

This happens because CORS is enforced only by browsers.
Postman does not enforce CORS restrictions.

Quick Debug Checklist

Confirm CORS headers are set on the backend
Restart the server
Clear browser cache
Check the browser console again

Conclusion

The “Blocked by CORS Policy” error is not a JavaScript bug.
It is a browser security rule.

Once you understand that CORS must be configured on the backend, the
solution becomes straightforward.

My Journey into Web Development (And Why I Started with JavaScript)

Emily Scott — Fri, 20 Feb 2026 07:36:04 +0000

Hi everyone, 👋

I’m a beginner web developer currently learning JavaScript, HTML, CSS, and PHP, and recently exploring AI integration in web apps. I wanted my first post to share why I started — and what I’ve learned so far.

Why I Started Learning Web Development

I’ve always been curious about how websites actually work. Not just how they look, but how they function behind the scenes.

When I discovered that:

HTML structures the content
CSS styles the design
JavaScript makes it interactive

...it suddenly felt less mysterious and more achievable.

💡 My Current Learning Focus

Right now, I’m focusing on:

✅ Writing clean HTML structure

✅ Building responsive layouts with CSS

✅ Understanding JavaScript fundamentals (variables, functions, loops)

✅ Exploring how AI APIs can connect with web apps

I’m not trying to rush into advanced frameworks yet. I want strong fundamentals first.

🔍 Biggest Lesson So Far

Consistency beats intensity.

It’s easy to feel overwhelmed when you see experienced developers building complex apps. But I’ve learned that small daily progress — even 30–60 minutes — adds up quickly.

🎯 What’s Next?

Learn DOM manipulation deeply
Build small interactive projects
Experiment with simple AI-powered features
Improve my Git & GitHub workflow

If you're also a beginner, I’d love to connect.
What are you currently learning?

Let’s grow step by step. 🚀

DEV Community: Emily Scott

How to Fix “Blocked by CORS Policy” Error in JavaScript (Step-by-Step Guide)

My Journey into Web Development (And Why I Started with JavaScript)