Let’s talk ↗
How to

CORS Policy: No Access-Control-Allow-Origin: How to Fix (Easy Guide)

CORS Policy Error_ Easy Fix Guide

You write a clean JavaScript fetch() or Axios request to pull data from an API, test your code, and open your browser’s developer console only to find a bright red roadblock:

Access to fetch at ‘https://api.example.com’ from origin ‘https://yourwebsite.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

This is the dreaded Cross-Origin Resource Sharing (CORS) error. Every frontend developer encounters it, and it can stall full-stack projects for hours.

Fortunately, CORS is not a bug; it is an intentional browser security mechanism. Once you understand how cross-origin headers work, fixing it takes just a few lines of configuration.

In this guide, we will break down why CORS errors occur and show you how to fix the No Access-Control-Allow-Origin header error across Apache, Nginx, WordPress, and Node.js.

Related Articles

What Is CORS and Why Does It Block Your Requests?

Browsers enforce a fundamental security standard known as the Same-Origin Policy (SOP). An origin consists of three things: the Protocol (HTTP vs HTTPS), the Domain (example.com), and the Port (:3000 vs :80).

If your frontend runs on https://yourdomain.com and tries to fetch data from https://api.otherdomain.com, the browser sees two different origins. To protect users from unauthorized data theft, the browser automatically blocks the response unless the target server explicitly includes a header saying: “Yes, I permit yourdomain.com to read this data.”

That header is: Access-Control-Allow-Origin.

Fix 1: Add CORS Headers in Apache (.htaccess)

If your API or WordPress backend is hosted on an Apache web server, you can enable cross-origin requests by adding response headers to your .htaccess file.

  1. In your website root directory, open your .htaccess file.
  2. Add the following block at the very top:
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
</IfModule>

Save changes. The asterisk (*) permits all domains to access resources. If you want to restrict access to only your specific frontend, replace "*" with your actual frontend domain: "https://yourwebsite.com".

Fix 2: Add CORS Headers in Nginx

If your backend runs on an Nginx server, add the headers inside your server configuration block:

location / {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

Save your configuration and run sudo systemctl reload nginx.

Fix 3: Enable CORS in WordPress REST API

If you are building a headless WordPress setup and your frontend React/Next.js app is blocked from fetching WordPress posts, add this filter to your theme’s functions.php file:

function add_cors_http_header() {
    header( "Access-Control-Allow-Origin: *" );
    header( "Access-Control-Allow-Methods: GET, POST, OPTIONS" );
    header( "Access-Control-Allow-Headers: Authorization, Content-Type" );
}
add_action( 'init', 'add_cors_http_header' );

Fix 4: Enable CORS in Node.js / Express

If your backend is built with Node.js and Express, the simplest solution is using the official cors middleware package:

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

app.use(cors()); // Enables CORS for all origins

For more web developer guides and server management tips, check our tutorials on solving the failed to write file to disk error and expanding limits for 413 request entity too large issues.

Wrapping Up

A CORS error simply means the server forgot to include an Access-Control-Allow-Origin permission header. Configuring your Apache, Nginx, or Express backend to send the appropriate header restores smooth cross-origin communication instantly.

Did configuring .htaccess resolve your CORS block? Let us know in the comments below!

Leave a Reply