Easy Fix: Fix CORS Error: No 'Access-Control-Allow-Origin'

Get in Touch With Us

Submitting the form below will ensure a prompt response from us.

The error CORS Error: No ‘Access-Control-Allow-Origin’ Header is Present on the Requested Resource error occurs when a frontend (browser) requests data from a different domain (Cross-Origin Request), but the server does not allow it.

✅ Solutions

Enable CORS on the Server

Modify the server’s response headers to allow cross-origin requests.
🔹 For Express.js (Node.js)


const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // Allow all origins
// Or allow specific origins
app.use(cors({ origin: 'https://yourfrontend.com' }));
app.get('/api/data', (req, res) => {
    res.json({ message: "CORS enabled!" });
});
app.listen(3000, () => console.log('Server running on port 3000'));

🔹 For PHP
Add this at the top of the PHP file:


header("Access-Control-Allow-Origin: *"); // Allow all
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

🔹 For Nginx
Add to the server block in nginx.conf:


location /api/ {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

🔹 For Apache
Add to .htaccess or httpd.conf:


Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

Handle Preflight Requests (OPTIONS Method)

If the request includes custom headers, PUT/DELETE methods, or credentials, browsers send a preflight request (OPTIONS) before the actual request. Ensure your server responds to it.
Example for Express.js


app.options('*', (req, res) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "Content-Type");
res.sendStatus(200);
});

Use a Proxy (Temporary Fix)

If you can’t modify the server, use a proxy server or CORS bypass.
🔹 For React/Angular (Proxy Setup)
Add to package.json (for local development only):

"proxy": "https://yourbackend.com"

🔹 Using a CORS Proxy Service (Temporary Solution)

Instead of:

fetch('https://api.example.com/data')

Use:

fetch('https://cors-anywhere.herokuapp.com/https://api.example.com/data')

⚠️ Note: This is not recommended for production.

Check for Browser Extensions Blocking CORS

Sometimes, browser extensions (like ad blockers or privacy tools) can block CORS. Try disabling them or testing in incognito mode.

Summary

✔ Best Fix: Enable CORS headers on the server.
✔ Alternative: Use a proxy for development.
✔ Temporary Fix: Use CORS proxy services.

About Author

Jayanti Katariya is the CEO of Moon Technolabs, a fast-growing IT solutions provider, with 18+ years of experience in the industry. Passionate about developing creative apps from a young age, he pursued an engineering degree to further this interest. Under his leadership, Moon Technolabs has helped numerous brands establish their online presence and he has also launched an invoicing software that assists businesses to streamline their financial operations.