How to Fix CORS Error: No ‘Access-Control-Allow-Origin’ ?
Jayanti Katariya
Last Updated: March 12, 2025
Total View: 982
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.
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.
Get in Touch With Us
Submitting the form below will ensure a prompt response from us.
