Introduction to CORS & Basic Setup

Introduction

Welcome to the "Enabling & Customizing CORS in Your TypeScript REST API" course! In this first lesson, we'll explore what CORS is and set up basic CORS support in your API. Let's start with a common scenario: You're building a web application where your frontend (running on https://myapp.com) needs to make API requests to your backend server (running on https://api.myapp.com). When you try to fetch data, the browser blocks these requests with an error like: Access to fetch at 'https://api.myapp.com/data' from origin 'https://myapp.com' has been blocked by CORS policy This happens because of the same-origin policy - a security feature built into browsers that prevents scripts from one website from accessing resources from a different domain. This is where CORS comes in. Cross-Origin Resource Sharing (CORS) is a mechanism that allows your server to indicate which origins (domains) should be permitted to access its resources. It's not a security feature itself, but rather a controlled relaxation of the same-origin policy.

Understanding CORS Basics

CORS works through a series of HTTP headers exchanged between the browser and the server: The browser automatically adds an Origin header to cross-origin requests The server responds with specific CORS headers that tell the browser whether to allow the request The key response headers include: Access-Control-Allow-Origin : Specifies which origins can access the resource (e.g., https://myapp.com or * for all origins) Access-Control-Allow-Methods : Lists permitted HTTP methods (GET, POST, etc.) Access-Control-Allow-Headers : Indicates which headers can be used in the request Here's a visualization of how CORS works:

Simple vs. Complex Requests

CORS distinguishes between two types of cross-origin requests: Simple requests that meet specific criteria (GET, POST, or HEAD methods with only standard headers) These follow the basic flow shown above Complex requests that use other methods (PUT, DELETE) or custom headers For these, the browser first sends a "preflight" OPTIONS request The server must respond to this preflight with appropriate CORS headers Only if the preflight succeeds will the browser send the actual request We'll explore preflight requests in more detail in upcoming lessons.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Shell

# Request from malicious site that includes the user's cookies
curl -H "Origin: http://evil-site.com" --include --cookie "session=user123" \
  https://bank-api.com/account-details

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

{"balance": 5000, "accountNumber": "12345678"}

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

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

Shell

npm install express cors
npm install @types/express @types/cors --save-dev

TypeScript

import express from 'express';
import cors from 'cors';

const app = express();
const PORT = 3000;

// Basic CORS setup - allows requests from any origin
app.use(cors());

// Routes
app.get('/api/public-data', (req, res) => {
  res.json({ message: 'This is public data accessible from any origin' });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

TypeScript

import express from 'express';
import cors from 'cors';

const app = express();
const PORT = 3000;

// CORS configuration
const corsOptions = {
  origin: 'https://myapp.com', // Only allow this specific origin
  methods: ['GET', 'POST'],    // Only allow these HTTP methods
  credentials: true           // Allow cookies to be sent with requests
};

// Apply CORS with the specific options
app.use(cors(corsOptions));

// Routes
app.get('/api/user-data', (req, res) => {
  res.json({ 
    userId: 123, 
    name: 'John Doe',
    email: 'john@myapp.com' 
  });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

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

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Credentials: true
Content-Type: application/json

{"userId":123,"name":"John Doe","email":"john@myapp.com"}

Introduction

Understanding CORS Basics

Simple vs. Complex Requests

Join the 1M+ learners on CodeSignal

Security Risks of Misconfigured CORS

Setting Up Basic CORS in Express with TypeScript

Before and After CORS Implementation

Common Pitfalls and Misconceptions

Conclusion