DEV Community: Madhan Gannarapu

What Is CORS and Why Is It Breaking My API Requests?

Madhan Gannarapu — Fri, 01 Aug 2025 11:32:48 +0000

If you’ve ever built a web app that talks to a backend API, you’ve probably run into this scary message:

❌ “Access to fetch at ‘some-api.com’ from origin ‘your-site.com’
has been blocked by CORS policy...”

Sounds confusing? Don’t worry — this article will explain what CORS is, why it exists, and how to fix it.

The Real Problem: Different Origins

Let’s say:

Your frontend is hosted at: https://mycoolapp.com
Your backend API lives at: https://api.mycoolapp.com

Even though they look similar, the browser sees them as different places, called origins.

An origin is made up of:

Origin = protocol + domain + port

If any of these are different, the browser treats it as a cross-origin request

And that’s when CORS steps in.

So What is CORS?

CORS stands for Cross-Origin Resource Sharing.

It’s a security rule built into all modern browsers that says:

“I’ll only let your website fetch data from another origin if that origin allows it.”

That means — even if your API is working fine, the browser can still block your request unless the API sends back the right permissions.

Why Does the Browser Do This?

It’s there to protect users.

Imagine:

You’re logged into your bank.
You visit a shady site.
That site secretly tries to make a request to your bank using your login session.

Without CORS, the shady site could potentially succeed.

So browsers add a safety check:

“You can’t send requests to other websites unless they clearly say it’s okay”

When Do CORS Errors Happen?

CORS errors usually happen when your website tries to talk to another origin. For example:

✅ Your site: https://example.com

❌ Tries to call:
- http://example.com        (different protocol)
- https://api.example.com   (different subdomain)
- https://backend.com       (different domain)
- https://example.com:8080  (different port)

Other reasons CORS might fail:

The backend doesn’t return the correct CORS headers
You’re sending Authorization headers or cookies
You’re using PUT, DELETE, or custom headers — which triggers a preflight request

If the browser doesn’t get permission, it blocks the request.

What’s a Preflight Request?

A preflight request is like asking for permission before doing something sensitive.
Let’s say your frontend wants to:

Use the PUT method
Send application/json data
Include a token in headers The browser says:

“Hold on! Let me check with the server first.”

So it sends an hidden OPTIONS request - this is called “preflight.”
If the server replies properly, your request goes through ✅
If not, the browser blocks it 💥

How the OPTIONS Request Works

Browser sends:

OPTIONS /api/user HTTP/1.1  
Origin: https://mycoolapp.com  
Access-Control-Request-Method: PUT  
Access-Control-Request-Headers: Content-Type, Authorization

Server must respond:

Access-Control-Allow-Origin: https://mycoolapp.com  
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  
Access-Control-Allow-Headers: Content-Type, Authorization  
Access-Control-Allow-Credentials: true

If the server doesn’t send these headers, the request will be blocked.

How to Fix CORS

If you control the backend, here’s what you need to do:

Allow your frontend’s origin
Handle the OPTIONS method
Allow necessary headers and methods
If you’re using cookies or auth tokens, set Access-Control-Allow-Credentials: true

Example: Fixing CORS in Node.js (Express)

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

app.use(cors({
  origin: 'https://mycoolapp.com',         // allow your frontend
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  credentials: true,                        // allow cookies/tokens
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.options('*', cors()); // Handle preflight

Quick Troubleshooting Checklist

✅ CORS Debugging Checklist

✅ Check                                  | Example
------------------------------------------|---------------------------------------------------
Is the origin allowed?                    | Access-Control-Allow-Origin: https://mycoolapp.com
Are custom headers allowed?               | Authorization, X-Custom-Header
Is the preflight request handled?         | Allow OPTIONS requests
Are credentials (cookies/tokens) enabled? | Access-Control-Allow-Credentials: true
Are you using * with credentials?         | ❌ Not allowed. Use exact origin instead

Managing Multiple Git Accounts on One Machine(Mac/Linux)

Madhan Gannarapu — Fri, 04 Jul 2025 08:47:08 +0000

How to set up and manage personal and work Git accounts on your local machine.

🚀 Introduction

Many developers work with both personal and work GitHub accounts. Here's how to manage them on a Mac...

What You’ll Learn

✅ Use SSH to separate identities
✅ Automatically apply correct Git user config based on folder
✅ Clean directory structure

📁 Directory Setup

~/
├── .ssh/
│   ├── work/
│   │   ├── id_ed25519_work
│   │   ├── id_ed25519_work.pub
│   ├── personal/
│   │   ├── id_ed25519_personal
│   │   ├── id_ed25519_personal.pub
│   └── config               # SSH config file
├── .gitconfig
├── .gitconfig-work          # Workspace-specific Git config
├── .gitconfig-personal      # Personal Git config
├── work/                    # All workspace (work) repositories
└── personal/                # All personal repositories

Set Up Personal and Work

mkdir personal work

personal: Use this folder for:

Your own apps, portfolios
Open source contributions
Learning new tech, coding experiments
Resume or portfolio projects
Hackathons or fun builds

work: Use this folder for:

company apps/repos
poc apps
Anything related to employment

Generate SSH Keys for Each Git Account

Generate a unique SSH key for each GitHub or GitLab account:

# Personal
ssh-keygen -t ed25519 -C "your-email@personal.com" -f ~/.ssh/personal/id_ed25519_personal

# Work
ssh-keygen -t ed25519 -C "your-email@company.com" -f ~/.ssh/work/id_ed25519_work

Now Add the SSH keys to the ssh-agent:

# Personal
ssh-add ~/.ssh/personal/id_ed25519_personal

# Work
ssh-add ~/.ssh/work/id_ed25519_work

Add SSH Keys to Your GitHub Accounts (Company & Personal)

Once you've generated the SSH keys, you need to add the public keys to your respective GitHub accounts so they can recognize and authorize your machine
To view the SSH keys in terminal run

# Personal
cat ~/.ssh/personal/id_ed25519_personal.pub

# work
cat ~/.ssh/work/id_ed25519_work.pub

Configure the SSH Config File

Create or update your ~/.ssh/config file:

touch ~/.ssh/config
open ~/.ssh/config

add:

# Personal
Host github.com-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/personal/id_ed25519_personal

# Work
Host github.com-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/work/id_ed25519_work

Use github.com-personal or github.com-work as the remote URL host.

Verification SSH with GitHub accounts

To verify SSH works:

ssh -T git@github-work
ssh -T git@github-personal

Expect messages like: “Hi ! You've successfully authenticated...”

Configure the Global`.gitconfig` File

Create two custom Git configs:

# Personal Git config
touch ~/.gitconfig-personal

# Work Git config
touch ~/.gitconfig-work

Open and fill them like this:
~/.gitconfig-personal

[user]
  name = Madhan Gannarapu
  email = your-email@personal.com

~/.gitconfig-work

[user]
  name = Madhan Gannarapu
  email = your-email@company.com

Use Conditional Includes in Global `.gitconfig`

Create or update your ~/.ssh/config file:

touch ~/.ssh/config
open ~/.ssh/config

Paste this:

[user]
  name = Default Madhan
  email = default@example.com

[includeIf "gitdir:~/work/**"]
  path = ~/.gitconfig-work

[includeIf "gitdir:~/personal/**"]
  path = ~/.gitconfig-personal

This config tells Git to automatically use different identity files depending on which directory the repo is in.

Clone Repos with Correct SSH Host

Use the matching host from your ~/.ssh/config file

# Personal
git clone git@github.com-personal:username/repo.git ~/Projects/personal/repo

# Work
git clone git@github.com-work:company/repo.git ~/Projects/work/repo