Console9

CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

Fix the CORS error where the server response lacks the Access-Control-Allow-Origin header by configuring the correct response header on the server.

Cross-Origin Resource Sharing (CORS) produces the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when the server response does not include the Access-Control-Allow-Origin header.

When CORS Produces This Error

Cross-Origin Resource Sharing (CORS) produces this error when a browser makes a cross-origin request and the server's response does not include the Access-Control-Allow-Origin header. The browser blocks JavaScript from reading the response body and logs the error in the console.

CORS produces this same error during a preflight OPTIONS request when the server does not return the Access-Control-Allow-Origin header on the preflight response. The browser cancels the actual request because the preflight failed.

What Causes "No 'Access-Control-Allow-Origin' Header" in CORS

Cross-Origin Resource Sharing (CORS) requires the server to include Access-Control-Allow-Origin in every response to a cross-origin request. The browser checks this header before exposing the response to JavaScript. A missing header means the server has not opted in to cross-origin access.

CORS headers are missing when the server does not have CORS configured at all. Many web servers and application frameworks do not send CORS headers by default. The server processes the request and returns a valid response, but the browser blocks it because the required header is absent.

CORS headers may also be missing when the server only returns them on successful responses (2xx status codes) but not on error responses (4xx, 5xx). Nginx's add_header directive and Apache's Header set directive omit headers from error responses unless explicitly configured with the always parameter.

How to Fix "No 'Access-Control-Allow-Origin' Header" in CORS

  1. Identify which server handles the cross-origin request. The server that receives the request must set the Cross-Origin Resource Sharing (CORS) headers -- not the server that hosts the front-end application.

  2. Add the Access-Control-Allow-Origin header to the server configuration. The fix depends on the platform:

    Apache HTTP Server-- Add the header in the .htaccess file or the VirtualHost configuration:

    <IfModule mod_headers.c>
        Header always set Access-Control-Allow-Origin "https://app.example.com"
        Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
        Header always set Access-Control-Allow-Headers "Content-Type, Authorization"
    </IfModule>

    See How to configure CORS on Apache HTTP Serverfor full steps.

    Nginx-- Add the header in the server or location block:

    add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

    See How to configure CORS on Nginxfor full steps.

    PHP-- Call header() at the top of the PHP file:

    <?php
    header('Access-Control-Allow-Origin: https://app.example.com');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, Authorization');

    See How to configure CORS in PHPfor full steps.

    Node.js with Express-- Install and use the cors middleware:

    const cors = require('cors');
    app.use(cors({ origin: 'https://app.example.com' }));

    See How to configure CORS in Node.jsfor full steps.

    Python Flask-- Install and apply flask-cors:

    from flask_cors import CORS
    CORS(app, origins=['https://app.example.com'])

    See How to configure CORS in Python Flaskfor full steps.

    Python Django-- Install django-cors-headers and add the origin to CORS_ALLOWED_ORIGINS in settings.py:

    CORS_ALLOWED_ORIGINS = [
        'https://app.example.com',
    ]

    See How to configure CORS in Python Djangofor full steps.

  3. Restart or reload the web server to apply the configuration changes.

How to Verify the Fix

Send a cross-origin request with curl and check that the response includes the Access-Control-Allow-Origin header:

curl -I -H "Origin: https://app.example.com" https://api.example.com/endpoint

CORS is working when the response contains:

Access-Control-Allow-Origin: https://app.example.com

CORS example in NodeJS

Edge Cases and Variations

CORS errors that appear only on error responses (404, 500) indicate the server uses Header set (Apache) or add_header without always (Nginx). These directives skip non-2xx responses. Change to Header always set in Apache or add the always parameter in Nginx.

CORS errors that appear only on preflight requests indicate the server does not handle OPTIONS requests. Configure the server to return a 204 response with CORS headers for OPTIONS requests. See CORS best practicesfor preflight handling recommendations.

CORS errors that appear only in production but not in development may indicate a reverse proxy or CDN that strips or caches CORS headers. Include Vary: Origin in the response to prevent cache poisoning.