Cross-origin network requests occur whenever a web page hosted on one origin attempts to access resources from a different origin. An origin is defined by its scheme, host, and port; any mismatch triggers browser same-origin policy restrictions. To enable API communication across domains, developers typically rely on two approaches: Cross-Origin Resource Sharing (CORS) and JSON Padding (JSONP). While JSONP relies on script injection and only supports GET requests, CORS utilizes standardized HTTP headers and serves as the industry standard.

Configuring CORS Middleware

The cors package acts as an Express middleware that automatically injects required headers into outgoing responses. Initialization follows a straightforward pattern:

npm install cors

Once installed, import the module and apply it globally before defining specific route handlers:

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

// Apply middleware globally to permit external origin access
app.use(cors());

By default, this grants permission to any requesting domain. For granular control, explicit header manipulation can be applied. Key headers include:

• Access-Control-Allow-Origin: Defines permitted sources. Using * allows universal access, while specifying a exact domain restricts it.
• Access-Control-Allow-Headers: Controls which custom or non-standard request headers are accepted. Browsers natively permit only a limited set of safe headers by default.
• Access-Control-Allow-Methods: Explicitly whitelists allowed HTTP verbs. The default behavior typically covers GET, POST, and HEAD.

Request Classifications

Browsers categorize CORS interactions based on complexity rules:

Simple Requests A request qualifies as a simple request if it uses GET, POST, or HEAD methods and includes only standard headers with whitelisted Content-Type values (text/plain, multipart/form-data, application/x-www-form-urlencoded). These trigger a single network transaction.

Preflighted Requests Preflight requests occur when custom headers, non-standard methods (like PUT or DELETE), or application/JSON payloads are involved. The browser first sends an OPTIONS request to verify server permissions. Only upon a successful preflight response does the actual request proceed. This two-step handshake ensures compatibility and security.

Server-Side Routing Implementation

Below demonstrates a modular Express setup handling various HTTP methods with proper payload parsing:

// routes/apiHandlers.js
const express = require('express');
const router = express.Router();

router.get('/fetch', (req, res) => {
  const queryParams = req.query;
  res.json({ success: true, action: 'Retrieved parameters', payload: queryParams });
});

router.post('/submit', (req, res) => {
  const submittedData = req.body;
  res.json({ success: true, action: 'Data processed', payload: submittedData });
});

router.delete('/remove', (req, res) => {
  res.json({ success: true, action: 'Resource deleted' });
});

module.exports = router;

Alternative Protocol: JSON Padding (JSONP)

Prior to widespread CORS adoption, dynamic script tags were used to bypass same-origin restrictions. JSONP leverages this mechanism by wrapping data within a user-defined callback function. Because it manipulates the DOM via script injection, it lacks support for method customization and advanced error handling.

Implementing JSONP requires extracting the callback name from query parameters, serializing the response object, and returning a callable string:

// app.js
const express = require('express');
const apiRouter = require('./routes/apiHandlers');

const app = express();

// Enable URL-encoded body parsing
app.use(express.urlencoded({ extended: false }));

// JSONP endpoint definition
app.get('/legacy/jsonp', (req, res) => {
  const callbackName = req.query.cb || 'defaultHandler';
  const responseData = { identifier: 42, status: 'completed' };
  const formattedOutput = `${callbackName}(${JSON.stringify(responseData)})`;
  
  res.type('text/javascript').send(formattedOutput);
});

// Global CORS middleware
app.use(require('cors')());

// Mount API routes
app.use('/api', apiRouter);

app.listen(3000, () => console.log('Server initialized on http://localhost:3000'));

Client-Side Verification

Browser-based testing typically employs library-assisted AJAX calls or native fetch equivalents. The following markup demonstrates event-driven validation for the impelmented endpoints:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>API Verification Panel</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  <button id="verifyGet">Fetch Data</button>
  <button id="verifyPost">Send Payload</button>
  <button id="verifyDelete">Remove Resource</button>
  <button id="verifyJsonp">Legacy Callback</button>

  <script>
    $(document).ready(function() {
      $('#verifyGet').on('click', function() {
        $.ajax({ url: 'http://localhost:3000/api/fetch', type: 'GET', data: { testKey: 'alpha', testVal: 99 } })
          .done(data => console.log('GET Result:', data));
      });

      $('#verifyPost').on('click', function() {
        $.ajax({ url: 'http://localhost:3000/api/submit', type: 'POST', contentType: 'application/x-www-form-urlencoded', data: { item: 'book', value: 'reference' } })
          .done(data => console.log('POST Result:', data));
      });

      $('#verifyDelete').on('click', function() {
        $.ajax({ url: 'http://localhost:3000/api/remove', type: 'DELETE' })
          .done(data => console.log('DELETE Result:', data));
      });

      $('#verifyJsonp').on('click', function() {
        $.ajax({ url: 'http://localhost:3000/legacy/jsonp', type: 'GET', dataType: 'jsonp' })
          .done(data => console.log('JSONP Result:', data));
      });
    });
  </script>
</body>
</html>