Guides

CORS

Suggest Edits

Pax8 does not AllowList any Cross Domain requests at this time. If you experience CORS issues, we recommend creating a CORS proxy or other industry standard approach.

CORS

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to control how web pages in one domain can request and interact with resources from another domain. It is designed to prevent malicious websites from making unauthorized requests to other domains on behalf of the user. CORS involves both server-side configuration and client-side handling.

Client-side:

When making a cross-origin request (i.e., a request from a different domain), the client (usually a web browser) must include certain headers in the HTTP request to enable CORS. Here are some common headers that API clients must send for CORS to work:

  1. Origin: The client includes an "Origin" header in the HTTP request, indicating the origin (protocol, domain, and port) of the web page making the request. For example: Origin: https://example.com
  2. Preflight Request Headers: For certain types of requests (e.g., those with specific HTTP methods like PUT or DELETE, or custom headers), a preflight request is sent by the browser before the actual request. The client must send headers like "Access-Control-Request-Method" and "Access-Control-Request-Headers" to specify the intended method and headers for the main request. For example:Access-Control-Request-Method: PUT Access-Control-Request-Headers: Authorization, Content-Type
  3. Credentials (with appropriate credentials header): If the request includes credentials (e.g., cookies, HTTP authentication), the client needs to set the "withCredentials" property to "true" and include the "Credentials" header. For example:withCredentials: true

Server-Side:

On the server, CORS is configured to allow or deny cross-origin requests. It checks the "Origin" header from the client and responds with appropriate headers to grant or deny access. Some of the server-side response headers include:

  1. Access-Control-Allow-Origin: This header indicates which origin is allowed to access the resource. It can be set to a specific origin or "*" to allow any origin. For example:Access-Control-Allow-Origin: https://example.com
  2. Access-Control-Allow-Methods: This header indicates which HTTP methods are allowed for the resource. For example:Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  3. Access-Control-Allow-Headers: This header indicates which HTTP headers are allowed for the resource. For example:Access-Control-Allow-Headers: Authorization, Content-Type
  4. Access-Control-Allow-Credentials: This header indicates whether the resource supports credentials (e.g., cookies, HTTP authentication). For example:Access-Control-Allow-Credentials: true

In summary, CORS is a mechanism that allows controlled access to resources on a different domain. API clients must send specific headers like "Origin" and, in some cases, preflight request headers, while servers must respond with appropriate "Access-Control-Allow-*" headers to enable cross-origin requests. This ensures secure communication between web applications from different origins.

Example of valid CORS request with headers:`

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

// Middleware to enable CORS
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // Allow requests from any origin
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is a public resource' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

The above example is a valid CORS request because, we've added a middleware that sets the Access-Control-Allow-Origin header to allow requests from any origin (*). This allows frontend applications hosted on different domains to make requests to http://localhost:3000/api/data without encountering CORS errors.

Example of invalid CORS request with headers:`

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

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is a public resource' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

The above example is an invalid CORS request because By default, Express.js does not enable CORS, so any frontend application hosted on a different domain trying to access http://localhost:3000/api/data will encounter CORS errors in the browser.

More info about CORS can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Updated 12 months ago