CORS policy blocking API calls

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers that restricts how resources on a web page can be requested from another domain. If an API call is blocked due to a CORS policy, the browser prevents the request from completing, leading to errors such as:

Access to fetch at 'https://api.example.com/data' from origin 'https://yourdomain.com' has been blocked by CORS policy.

In this article, we will explore:

1. What CORS is and why it exists
2. How CORS works
3. Common reasons for CORS errors
4. Methods to fix CORS issues
5. Best practices for handling CORS

---

1. What is CORS and Why Does It Exist?

CORS is a security feature that restricts JavaScript from making requests to a different domain than the one that served the web page.

Why is CORS Important?

• Prevents malicious websites from making unauthorized requests to your API.
• Enhances web security by ensuring that only trusted domains can access your API.

However, legitimate API calls may also get blocked due to misconfigured CORS settings.

---

2. How CORS Works

CORS relies on HTTP headers to determine if a request is allowed.

Simple vs. Complex Requests

There are two types of CORS requests:

Simple Requests

A request is considered simple if it meets the following conditions:

• Uses GET, POST, or HEAD methods.
• Only includes standard headers like Content-Type: application/x-www-form-urlencoded.

Example of a Simple Request:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("CORS error:", error));

Preflight Requests

If a request includes custom headers or uses methods like PUT, DELETE, or PATCH, the browser sends a preflight request using the OPTIONS method before making the actual request.

Example Preflight Request:

OPTIONS /data HTTP/1.1
Origin: https://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Expected Server Response:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

If the server does not return the correct headers, the browser blocks the request.

---

3. Common Reasons for CORS Errors

1️⃣ Missing Access-Control-Allow-Origin Header

If the API response does not include the Access-Control-Allow-Origin header, the browser blocks the request.

Fix: Configure the server to return:

Access-Control-Allow-Origin: *

or

Access-Control-Allow-Origin: https://yourdomain.com

2️⃣ Incorrect Allowed Methods

If your API does not allow a specific HTTP method (POST, DELETE, etc.), the browser blocks the request.

Fix: Add the required methods in the server response:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

3️⃣ Preflight Request Failing

If a preflight OPTIONS request is not handled correctly, the browser does not proceed with the actual request.

Fix: Ensure your server responds to OPTIONS requests with:

Access-Control-Allow-Headers: Content-Type, Authorization

4️⃣ Client-Side Fetch Request Issues

If the fetch API or XMLHttpRequest is misconfigured, CORS errors can occur.

Fix: Use mode: 'cors' in fetch:

fetch("https://api.example.com/data", { mode: 'cors' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("CORS error:", error));

5️⃣ API Hosted on a Different Port or Subdomain

Even if your frontend and backend are on the same domain, using different ports (http://localhost:3000 vs http://localhost:5000) can trigger CORS issues.

Fix: Allow specific origins in the backend:

Access-Control-Allow-Origin: http://localhost:3000

---

4. How to Fix CORS Issues on the Server-Side

Fix 1: Enable CORS in Node.js (Express)

In an Express.js backend, use the cors middleware:

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

app.use(cors()); // Allows all origins

// Or allow specific origins
app.use(cors({
    origin: "https://yourdomain.com",
    methods: "GET,POST,PUT,DELETE",
    allowedHeaders: "Content-Type,Authorization"
}));

app.get("/data", (req, res) => {
    res.json({ message: "CORS enabled!" });
});

app.listen(5000, () => console.log("Server running on port 5000"));

---

Fix 2: Configure CORS in Nginx

If your API is hosted with Nginx, modify the configuration:

server {
    listen 80;
    server_name api.example.com;

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

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

---

Fix 3: Enable CORS in Apache

For an Apache server, update the .htaccess file:

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

---

Fix 4: Handle CORS in a Python Flask API

In Flask, enable CORS using the flask-cors library:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/data")
def get_data():
    return {"message": "CORS enabled!"}

if __name__ == "__main__":
    app.run(port=5000)

---

5. How to Fix CORS Issues on the Client-Side

Fix 1: Use a Proxy Server

If you don’t control the API, use a proxy to avoid CORS errors.

Node.js Proxy Server

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        "/api",
        createProxyMiddleware({
            target: "https://api.example.com",
            changeOrigin: true
        })
    );
};

---

Fix 2: Bypass CORS with a Chrome Extension

For testing purposes, use a CORS bypass extension like “CORS Unblock” in Chrome.

---

6. Best Practices for Handling CORS

Allow only trusted origins instead of using *.
Limit allowed HTTP methods to required ones.
Handle preflight requests properly on the server.
Use authentication securely instead of exposing all headers.
Avoid modifying CORS settings on the client side; fix it on the server.