mcp-server-chart的跨域问题

mcp-server-chart本地源码部署完成后SSE模式启动 mcp-server-chart --transport sse --host 0.0.0.0后可以访问http://localhost:1122/sse一直显示不出来tools,F12进行调试显示CORS跨域错误。对sse.ts进行了更改。import type { Server } from modelcontextprotocol/sdk/server/index.js; import { SSEServerTransport } from modelcontextprotocol/sdk/server/sse.js; import express, { type Request, type Response } from express; import { logger } from ../utils/logger; export const startSSEMcpServer async ( createServer: () Server, endpoint /sse, port 1122, host localhost, ): Promisevoid { const app express(); // 手动设置CORS头 - 解决跨域访问问题app.use((req: Request, res: Response, next) { res.header(Access-Control-Allow-Origin, *); res.header(Access-Control-Allow-Methods, GET, POST, OPTIONS); res.header(Access-Control-Allow-Headers, Content-Type, Authorization, X-Requested-With); res.header(Access-Control-Expose-Headers, Content-Type);// 处理预检请求 if (req.method OPTIONS) { return res.status(200).end(); } next(); }); app.use(express.json()); const connections: Recordstring, SSEServerTransport {}; app.get(endpoint, async (req: Request, res: Response) { const server createServer(); const transport new SSEServerTransport(/messages, res); connections[transport.sessionId] transport; transport.onclose () { delete connections[transport.sessionId]; logger.info(SSE Server disconnected: sessionId${transport.sessionId}); }; await server.connect(transport); logger.info(SSE Server connected: sessionId${transport.sessionId}); }); app.post(/messages, async (req: Request, res: Response) { const sessionId req.query.sessionId as string; if (!sessionId) { logger.warn(SSE Server sessionId parameter is missing); return res.status(400).send(Missing sessionId parameter); } const transport connections[sessionId]; if (!transport) { logger.warn(SSE Server session not found: sessionId${sessionId}); return res.status(404).send(Session not found); } try { logger.info(SSE Server handling message: sessionId${sessionId}); await transport.handlePostMessage(req, res, req.body); } catch (e) { logger.error(SSE Server error handling message, e); if (!res.headersSent) res.status(500).send(Error handling request); } }); app.listen(port, host, () { logger.success(SSE Server listening on http://${host}:${port}${endpoint}); }); };重点是红色部分主要是增加Access-Control-Allow-Origin header,解决跨域问题手工写了一个测试html界面!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleMCP SSE Tools 测试页面/title style body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } .container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; text-align: center; } .controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } input, button { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } input { flex: 1; min-width: 200px; } button { background-color: #007bff; color: white; border: none; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } button:disabled { background-color: #6c757d; cursor: not-allowed; } .status { padding: 10px; margin: 10px 0; border-radius: 4px; font-weight: bold; } .connected { background-color: #d4edda; color: #155724; } .disconnected { background-color: #f8d7da; color: #721c24; } .loading { background-color: #fff3cd; color: #856404; } .results { margin-top: 20px; } .tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; } .tool-item { border: 1px solid #ddd; padding: 15px; border-radius: 4px; background-color: #f8f9fa; } .tool-name { font-weight: bold; color: #007bff; margin-bottom: 5px; } .tool-description { color: #666; font-size: 12px; line-height: 1.4; } .error { color: #dc3545; background-color: #f8d7da; padding: 10px; border-radius: 4px; margin: 10px 0; } .success { color: #155724; background-color: #d4edda; padding: 10px; border-radius: 4px; margin: 10px 0; } /style /head body div classcontainer h1MCP SSE Tools 有效性测试/h1 div classcontrols input typetext idsseUrl valuehttp://localhost:1122/sse placeholder输入SSE服务器URL button onclickconnectSSE()连接SSE服务器/button button onclicklistTools() idlistToolsBtn disabled获取工具列表/button button onclicktestTool() idtestToolBtn disabled测试工具调用/button button onclickdisconnectSSE()断开连接/button /div div idstatus classstatus disconnected未连接/div div classresults h3连接信息/h3 div idconnectionInfo/div h3工具列表 (span idtoolsCount0/span 个工具)/h3 div idtoolsList classtool-list/div h3测试结果/h3 div idtestResults/div /div /div script let eventSource null; let tools []; function updateStatus(message, type disconnected) { const statusEl document.getElementById(status); statusEl.textContent message; statusEl.className status ${type}; } function enableButtons(enable) { document.getElementById(listToolsBtn).disabled !enable; document.getElementById(testToolBtn).disabled !enable; } async function connectSSE() { const url document.getElementById(sseUrl).value; if (!url) { alert(请输入SSE服务器URL); return; } try { updateStatus(正在连接..., loading); // 创建SSE连接 eventSource new EventSource(url); eventSource.onopen () { updateStatus(SSE连接已建立, connected); enableButtons(true); console.log(SSE连接已建立); }; eventSource.onmessage (event) { console.log(收到SSE消息:, event.data); try { const message JSON.parse(event.data); handleServerMessage(message); } catch (e) { console.error(解析SSE消息失败:, e); } }; eventSource.onerror (error) { console.error(SSE连接错误:, error); updateStatus(连接错误, disconnected); enableButtons(false); if (eventSource) { eventSource.close(); eventSource null; } }; // 显示连接信息 document.getElementById(connectionInfo).innerHTML div classsuccess已连接到: ${url}/div; } catch (error) { console.error(连接失败:, error); updateStatus(连接失败: error.message, disconnected); document.getElementById(connectionInfo).innerHTML div classerror连接失败: ${error.message}/div; } } function handleServerMessage(message) { // 这里处理服务器返回的消息 console.log(处理服务器消息:, message); } async function listTools() { if (!eventSource) { alert(请先连接SSE服务器); return; } try { updateStatus(正在获取工具列表..., loading); // 通过SSE连接发送listTools请求 // MCP协议要求先初始化连接 const initializeRequest { jsonrpc: 2.0, id: Date.now(), method: initialize, params: { protocolVersion: 2024-11-05, capabilities: {}, clientInfo: { name: SSE-Test-Client, version: 1.0.0 } } }; // 由于SSE是单向的我们无法直接发送请求 // 这里显示预期的工具列表从代码中获取 const expectedTools [ {name: generate_area_chart, description: Generate a area chart to show data trends under continuous independent variables}, {name: generate_bar_chart, description: Generate a bar chart to compare values across different categories}, {name: generate_boxplot_chart, description: Generate a boxplot to display the distribution of data}, {name: generate_column_chart, description: Generate a column chart to compare values across different categories}, {name: generate_district_map, description: Generate a district map to show administrative divisions and data distribution}, {name: generate_dual_axes_chart, description: Generate a dual axes chart to display the relationship between two variables}, {name: generate_fishbone_diagram, description: Generate a fishbone diagram to identify root causes of problems}, {name: generate_flow_diagram, description: Generate a flowchart to display process steps and sequence}, {name: generate_funnel_chart, description: Generate a funnel chart to display data loss at different stages}, {name: generate_histogram_chart, description: Generate a histogram to display data distribution by intervals}, {name: generate_line_chart, description: Generate a line chart to display data trends over time}, {name: generate_liquid_chart, description: Generate a liquid chart to visualize percentages as water-filled spheres}, {name: generate_mind_map, description: Generate a mind map to display thought processes and hierarchical information}, {name: generate_network_graph, description: Generate a network graph to show relationships between nodes}, {name: generate_organization_chart, description: Generate an organizational chart to display structure and personnel relationships}, {name: generate_path_map, description: Generate a path map to display route planning results}, {name: generate_pie_chart, description: Generate a pie chart to display proportion of data}, {name: generate_pin_map, description: Generate a pin map to show distribution of POIs}, {name: generate_radar_chart, description: Generate a radar chart to display multi-dimensional data}, {name: generate_sankey_chart, description: Generate a sankey chart to display data flow and volume}, {name: generate_scatter_chart, description: Generate a scatter plot to show relationship between two variables}, {name: generate_spreadsheet, description: Generate a spreadsheet or pivot table for tabular data}, {name: generate_treemap_chart, description: Generate a treemap to display hierarchical data}, {name: generate_venn_chart, description: Generate a venn diagram to display relationships between sets}, {name: generate_violin_chart, description: Generate a violin plot to display data distribution}, {name: generate_waterfall_chart, description: Generate a waterfall chart to visualize cumulative effect of values}, {name: generate_word_cloud_chart, description: Generate a word cloud to show word frequency through text size} ]; tools expectedTools; displayTools(tools); updateStatus(预期有 ${tools.length} 个工具需要实际连接验证, connected); document.getElementById(testResults).innerHTML div classsuccess已加载预期工具列表。要实际测试工具调用请确保SSE服务器正在运行。/div; } catch (error) { console.error(获取工具列表失败:, error); document.getElementById(testResults).innerHTML div classerror获取工具列表失败: ${error.message}/div; updateStatus(获取工具列表失败, disconnected); } } function displayTools(tools) { const toolsListEl document.getElementById(toolsList); const toolsCountEl document.getElementById(toolsCount); toolsCountEl.textContent tools.length; if (tools.length 0) { toolsListEl.innerHTML div classerror未找到任何工具/div; return; } toolsListEl.innerHTML tools.map(tool div classtool-item div classtool-name${tool.name}/div div classtool-description${tool.description || 无描述}/div /div ).join(); } async function testTool() { if (tools.length 0) { alert(请先获取工具列表); return; } try { updateStatus(正在测试工具调用..., loading); // 测试第一个工具 const testTool tools[0]; // 由于SSE连接的复杂性这里只做模拟测试 const testArguments getTestArguments(testTool.name); document.getElementById(testResults).innerHTML div classsuccess strong工具调用模拟测试完成!/strongbr 工具: ${testTool.name}br 测试参数: ${JSON.stringify(testArguments)}br em注意这是模拟测试实际调用需要SSE服务器正确处理MCP协议/em /div ; updateStatus(工具调用模拟测试完成, connected); } catch (error) { console.error(工具调用测试失败:, error); document.getElementById(testResults).innerHTML div classerror工具调用测试失败: ${error.message}/div; updateStatus(工具调用测试失败, disconnected); } } function getTestArguments(toolName) { // 根据工具名称提供测试参数 const testData { data: [ { time: 2020, value: 100 }, { time: 2021, value: 120 }, { time: 2022, value: 145 } ] }; // 为不同类型的图表提供特定的测试参数 if (toolName.includes(line)) { return testData; } else if (toolName.includes(bar) || toolName.includes(column)) { return { data: [ { category: A, value: 100 }, { category: B, value: 150 }, { category: C, value: 200 } ] }; } else if (toolName.includes(pie)) { return { data: [ { type: A, value: 40 }, { type: B, value: 30 }, { type: C, value: 30 } ] }; } return testData; } function disconnectSSE() { if (eventSource) { eventSource.close(); eventSource null; } updateStatus(已断开连接, disconnected); enableButtons(false); document.getElementById(connectionInfo).innerHTML ; document.getElementById(toolsList).innerHTML ; document.getElementById(toolsCount).textContent 0; document.getElementById(testResults).innerHTML ; } // 页面加载时设置默认值 window.onload function() { document.getElementById(sseUrl).value http://localhost:1122/sse; }; /script /body /html改完后测试正常