🐕

modelcontextprotocol/sdk 利用のブラウザ MCP client で CORS エラーのメモ

2025/07/26に公開

CORS

Model Context Protocol

idea

ブラウザ MCP client(Streamable HTTP transport/HTTP SSE transport) だと,
MCP サーバが localhost でも接続しようとすると

Access to fetch at 'http://localhost:8085/mcp' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

とエラーが出る.

解決

import cors from 'cors';

// Add CORS middleware before your MCP routes
app.use(cors({
  origin: '*', // Configure appropriately for production, for example:
  // origin: ['https://your-remote-domain.com', 'https://your-other-remote-domain.com'],
  exposedHeaders: ['Mcp-Session-Id'],
  allowedHeaders: ['Content-Type', 'mcp-session-id'],
}));

と MCP サーバ側でヘッダをつけたりする必要がある.

また, 2025/07 (MCP Version 2025/06/18)時点では,

allowedHeaders に 'mcp-protocol-version' も必要でした.

Require negotiated protocol version to be specified via MCP-Protocol-Version header in subsequent requests when using HTTP (PR #548).

したがって

import cors from 'cors';

// Add CORS middleware before your MCP routes
app.use(cors({
  origin: '*', // Configure appropriately for production, for example:
  // origin: ['https://your-remote-domain.com', 'https://your-other-remote-domain.com'],
  exposedHeaders: ['Mcp-Session-Id'],
  allowedHeaders: ['Content-Type', 'mcp-session-id', 'mcp-protocol-version'],
}));

となる.

解決

Discussion