DEV Community

Emily Scott
Emily Scott

Posted on

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

#node #php #javascript #webdev

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

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.
Enter fullscreen mode Exit fullscreen mode

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:

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

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");
?>
Enter fullscreen mode Exit fullscreen mode

This allows cross-origin requests.

Important: Do Not Use “*” in Production

Using:

header("Access-Control-Allow-Origin: *");
Enter fullscreen mode Exit fullscreen mode

Allows requests from any domain.

In production, it is safer to specify your domain:

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

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.

Top comments (0)