feat(examples): add CORS headers for web client access

Enable browser-based MCP clients to access server examples by adding
CORS middleware with proper MCP-specific headers:
- Access-Control-Allow-Headers: Content-Type, mcp-session-id, mcp-protocol-version, last-event-id
- Access-Control-Expose-Headers: mcp-session-id, mcp-protocol-version

This addresses the CORS requirements discussed in ggml-org/llama.cpp#18334
for web frontends accessing MCP servers via Streamable HTTP and SSE.

Updated examples:
- simpleStreamableHttp.ts
- simpleStatelessStreamableHttp.ts
- simpleSseServer.ts
- jsonResponseStreamableHttp.ts
- standaloneSseWithGetStreamableHttp.ts
- sseAndStreamableHttpCompatibleServer.ts
- ssePollingExample.ts (updated existing cors() to include MCP headers)

Author: claude

examples/server/src/jsonResponseStreamableHttp.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'node:crypto';
 
 import type { CallToolResult } from '@modelcontextprotocol/server';
 import { createMcpExpressApp, isInitializeRequest, McpServer, StreamableHTTPServerTransport } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 import * as z from 'zod/v4';
 
@@ -95,6 +96,17 @@ const getServer = () => {
 
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 // Map to store transports by session ID
 const transports: { [sessionId: string]: StreamableHTTPServerTransport } = {};
 

examples/server/src/simpleSseServer.ts

@@ -1,5 +1,6 @@
 import type { CallToolResult } from '@modelcontextprotocol/server';
 import { createMcpExpressApp, McpServer, SSEServerTransport } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 import * as z from 'zod/v4';
 
@@ -78,6 +79,17 @@ const getServer = () => {
 
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 // Store transports by session ID
 const transports: Record<string, SSEServerTransport> = {};
 

examples/server/src/simpleStatelessStreamableHttp.ts

@@ -1,5 +1,6 @@
 import type { CallToolResult, GetPromptResult, ReadResourceResult } from '@modelcontextprotocol/server';
 import { createMcpExpressApp, McpServer, StreamableHTTPServerTransport } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 import * as z from 'zod/v4';
 
@@ -100,6 +101,17 @@ const getServer = () => {
 
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 app.post('/mcp', async (req: Request, res: Response) => {
     const server = getServer();
     try {

examples/server/src/simpleStreamableHttp.ts

@@ -22,6 +22,7 @@ import {
     requireBearerAuth,
     StreamableHTTPServerTransport
 } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 import * as z from 'zod/v4';
 
@@ -520,6 +521,17 @@ const AUTH_PORT = process.env.MCP_AUTH_PORT ? parseInt(process.env.MCP_AUTH_PORT
 
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 // Set up OAuth if enabled
 let authMiddleware = null;
 if (useOAuth) {

examples/server/src/sseAndStreamableHttpCompatibleServer.ts

@@ -8,6 +8,7 @@ import {
     SSEServerTransport,
     StreamableHTTPServerTransport
 } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 import * as z from 'zod/v4';
 
@@ -80,6 +81,17 @@ const getServer = () => {
 // Create Express application
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 // Store transports by session ID
 const transports: Record<string, StreamableHTTPServerTransport | SSEServerTransport> = {};
 

examples/server/src/ssePollingExample.ts

@@ -105,7 +105,17 @@ server.tool(
 
 // Set up Express app
 const app = createMcpExpressApp();
-app.use(cors());
+
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
 
 // Create event store for resumability
 const eventStore = new InMemoryEventStore();

examples/server/src/standaloneSseWithGetStreamableHttp.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'node:crypto';
 
 import type { ReadResourceResult } from '@modelcontextprotocol/server';
 import { createMcpExpressApp, isInitializeRequest, McpServer, StreamableHTTPServerTransport } from '@modelcontextprotocol/server';
+import cors from 'cors';
 import type { Request, Response } from 'express';
 
 // Create an MCP server with implementation details
@@ -36,6 +37,17 @@ const resourceChangeInterval = setInterval(() => {
 
 const app = createMcpExpressApp();
 
+// Enable CORS for web clients
+// This allows browser-based MCP clients to access this server
+app.use(
+    cors({
+        origin: '*',
+        methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version', 'last-event-id'],
+        exposedHeaders: ['mcp-session-id', 'mcp-protocol-version']
+    })
+);
+
 app.post('/mcp', async (req: Request, res: Response) => {
     console.log('Received MCP request:', req.body);
     try {