CORS compatibility

Understanding Cross-Origin Resource Sharing and why it matters for API integration

CORS (Cross-Origin Resource Sharing) is a critical consideration when choosing an API for client-side web applications. This guide explains what CORS is, why it matters, and how to work with APIs based on their CORS support.

What is CORS?

CORS is a security feature implemented by web browsers that controls whether a web page can make requests to a different domain than the one that served the page.

The same-origin policy

By default, browsers enforce the same-origin policy, which prevents JavaScript running on https://yourapp.com from making requests to https://api.example.com. This protects users from malicious scripts.

How CORS works

When you make a cross-origin request, the browser:

1. Sends a preflight request (OPTIONS) to the API server
2. Checks if the server allows requests from your origin
3. If allowed, makes the actual request
4. If denied, blocks the request and shows a CORS error

APIs enable CORS by including special HTTP headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

CORS values in the directory

Each API listing shows one of three CORS values:

Yes - CORS enabled

The API supports cross-origin requests and can be called directly from browser-based applications.

Examples:

• Dogs (Animals category) - Random dog pictures
• CoinGecko (Cryptocurrency) - Crypto prices and data
• Agify.io (Development) - Age estimation from names
• Genderize.io (Development) - Gender estimation from names
• Studio Ghibli (Anime) - Studio Ghibli film data
• Dog Facts (Animals) - Random dog facts
• HTTP Cat (Animals) - HTTP status code cats
• Art Institute of Chicago (Art & Design) - Museum art data

No - CORS not enabled

The API does not support CORS. These APIs can only be called from server-side code.

Examples:

• Cats (Animals) - Pictures of cats from Tumblr
• Cat Facts (Animals) - Daily cat facts
• Axolotl (Animals) - Axolotl pictures and facts
• RandomDuck (Animals) - Random duck pictures
• RandomFox (Animals) - Random fox pictures
• Waifu.pics (Anime) - Anime image sharing
• Metropolitan Museum of Art (Art & Design) - Met Museum data

Unknown - CORS status unclear

CORS support has not been verified. Test the API to confirm compatibility with your use case.

Examples:

• eBird (Animals) - Birding observations
• RescueGroups (Animals) - Pet adoption data
• xeno-canto (Animals) - Bird recordings
• AniDB (Anime) - Anime database
• AniList (Anime) - Anime discovery and tracking

When CORS matters

Client-side (CORS required)

Browser-based applications

You need CORS support if you’re building:

• Single-page applications (React, Vue, Angular)
• Static sites with JavaScript (vanilla JS, jQuery)
• Browser extensions
• Progressive web apps (PWAs)
• Any code running in a web browser

Example scenario

// This runs in the browser at https://myapp.com
fetch('https://api.coingecko.com/api/v3/ping')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

If the API has CORS: Yes ✅

• Request succeeds
• Data is returned
• Everything works

If the API has CORS: No ❌

• Browser blocks the request
• Console shows CORS error
• Request never reaches the server
• You cannot access the data

Typical CORS error

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

Server-side (CORS not required)

Backend applications

You don’t need CORS support if you’re building:

• Node.js/Express backends
• Python/Django or Flask APIs
• Ruby on Rails applications
• PHP backends
• Java/Spring Boot services
• Go services
• Any server-side code

Example scenario

// This runs on your Node.js server
const axios = require('axios');

app.get('/api/cat-fact', async (req, res) => {
  const response = await axios.get('https://cat-fact.herokuapp.com/facts');
  res.json(response.data);
});

Works with any API ✅

• CORS doesn’t apply to server-to-server requests
• All HTTP, HTTPS, and No-CORS APIs work
• No browser restrictions

The server-to-server pattern

This is the most common approach:

1. Browser makes request to your backend
2. Your backend makes request to third-party API
3. Your backend returns data to browser

Browser → Your API → Third-party API
        ←         ←

This works regardless of the third-party API’s CORS policy.

Working without CORS

If you need to use an API that doesn’t support CORS in a browser application, you have several options:

1. Use a backend proxy (recommended)

Create an endpoint on your server that calls the API:

// Your backend (Node.js/Express)
app.get('/api/proxy/cat-facts', async (req, res) => {
  const response = await fetch('https://cat-fact.herokuapp.com/facts');
  const data = await response.json();
  res.json(data);
});

// Your frontend
fetch('/api/proxy/cat-facts')
  .then(response => response.json())
  .then(data => console.log(data));

2. Use a CORS proxy service

Warning: Only use for development/testing, not production.

fetch('https://cors-anywhere.herokuapp.com/https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Risks of CORS proxies:

• Third-party can see all your requests
• May log sensitive data
• Can go offline at any time
• May have rate limits
• Security and privacy concerns

3. Choose an alternative API

If you’re building a client-side app, prioritize APIs with CORS: Yes to avoid these workarounds.

CORS configuration note

From the CONTRIBUTING.md documentation:

Without proper CORS configuration an API will only be usable server side.

This is a critical consideration when choosing an API. If you’re building:

• Client-side app → Filter for CORS: Yes
• Server-side app → Any CORS value works
• Full-stack app → Backend can call any API, frontend needs CORS

Testing CORS support

You can test if an API supports CORS:

Method 1: Browser console

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

Method 2: Check response headers

Use browser DevTools Network tab:

1. Make a request to the API
2. Check Response Headers
3. Look for Access-Control-Allow-Origin

If present, CORS is enabled.

Method 3: Command line

curl -I https://api.example.com/endpoint | grep -i "access-control"

Common CORS patterns

Public data APIs

APIs serving public data often enable CORS:

• Yes CORS: Dog pictures, weather data, public facts
• Designed for browser consumption
• No authentication needed
• Broad Access-Control-Allow-Origin: *

Authenticated APIs

APIs requiring API keys may:

• Enable CORS with restrictions
• Require specific origins to be whitelisted
• Support CORS only on certain endpoints
• Disable CORS for security (server-side only)

Enterprise APIs

Business/enterprise APIs often:

• Disable CORS (CORS: No)
• Intended for server-to-server communication
• Require authenticated backend calls
• More control over access

Security considerations

CORS is not authentication

CORS controls where requests come from, not who makes them:

• CORS doesn’t protect your API key
• Anyone can view frontend code and extract keys
• Use server-side code for sensitive operations
• CORS is about browser security, not API security

API keys in browsers

When using APIs with CORS in browsers:

// ⚠️ This API key is visible to everyone
fetch('https://api.example.com/data?key=YOUR_API_KEY')

Best practices:

• Use APIs with no auth for public data
• Keep sensitive API keys on your server
• Use environment variables
• Implement rate limiting on your backend
• Consider API key rotation

Quick reference

Scenario	CORS needed?	Recommended approach
React/Vue/Angular app calling API	Yes	Use API with CORS: Yes or add backend proxy
Node.js backend calling API	No	Call any API directly
Static HTML + JavaScript	Yes	Use API with CORS: Yes
Mobile app (React Native)	No	Call any API directly
Browser extension	Yes	Use API with CORS: Yes or background script
Serverless function (Lambda)	No	Call any API directly

Next steps

• Learn about authentication types
• Discover how to search and filter APIs
• Browse all available APIs