1. 从一句抱怨到可访问页面这条链路到底卡在哪腾讯云 COS MCP Server 加 CodeBuddy 这套组合能做的事很具体让 AI 直接读写你的对象存储把生成的页面一键发布到 EdgeOne Pages拿到一个公开可访问的 URL。适合谁适合手里有原型想法、但不想为了一次演示去搭完整前后端的人也适合想把「上传、展示、删除」这类对象存储操作交给自然语言来驱动的开发者。我这次的目标很明确做一个图片管理页面支持上传图片到腾讯云 COS、展示已上传图片、删除指定图片最后通过 EdgeOne Pages 发布成线上可访问的链接。听起来三步就能搞定实际做下来真正耗时间的不是写页面而是让页面在浏览器里稳定地调到 COS MCP Server。整条链路里最容易出问题的有三个点一是 CodeBuddy 里 MCP Server 的配置骨架SecretId、SecretKey、Bucket、Region 少一个都跑不起来二是页面直接调用 MCP 工具时的连接方式stdio 模式在浏览器里根本用不了必须换成 SSE三是本地页面和 SSE 服务之间的跨域不处理就是一堆 Failed to fetch。下面按我实际跑通的顺序拆开讲配置可以直接抄排障部分是我踩过的坑你可以对照着看。2. 前置准备密钥、存储桶与两个 MCP Server在 CodeBuddy 里配置 MCP Server 之前得先把腾讯云侧的凭证和存储资源准备好。这一步不难但顺序别乱。2.1 拿到 SecretId 和 SecretKey进入腾讯云访问管理控制台左侧菜单找到 API 密钥管理点新建密钥。弹窗里会生成一对 SecretId 和 SecretKey点复制保存下来。这两个值相当于你访问 COS 的账号密码后面配置 MCP Server 时要用。注意SecretKey 只在创建时完整显示一次关掉弹窗就看不到了。建议直接存到密码管理器里别随手丢在聊天记录。2.2 创建 COS 存储桶访问存储桶列表点创建存储桶。输入一个全局唯一的存储桶名称选一个离你近的地域比如 ap-beijing其余配置保持默认即可。创建完成后点进存储桶的概览页记下两个信息存储桶名称形如 bucket-1302073945和所属地域形如 ap-beijing。这两个值会写进 MCP 配置。2.3 在 CodeBuddy 里装 COS MCP Server回到 CodeBuddy 对话页点 MCP进入 MCP 市场搜索腾讯云 COS MCP Server点安装。配置页里填入 Bucket、Region、SecretId、SecretKeyDatasetName 是数据智能检索用的做图片管理可以不填。保存后COS MCP Server 就出现在你的 MCP 列表里了。2.4 配置 EdgeOne Pages MCP ServerPages MCP Server 负责把页面部署到 EdgeOne Pages 并返回公开链接。它需要一个 API Token。登录 EdgeOne Pages 控制台左侧切到 Pages再进 API Token 页面点创建 API Token填个描述、选个过期时间提交后复制生成的 Token。然后打开 CodeBuddy 的 MCP 配置文件把两个 Server 都写进去。完整骨架如下{ mcpServers: { TencentCloudCOSMCPServer: { command: npx, args: [cos-mcp], env: { Bucket: bucket-1302073945, DatasetName: , Region: ap-beijing, SecretId: 你的SecretId, SecretKey: 你的SecretKey } }, edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp], env: { EDGEONE_PAGES_API_TOKEN: 你的API令牌 } } } }保存后MCP 列表里两个 Server 都应该是可调用状态。你可以点 COS MCP Server 右侧的三角按钮CodeBuddy 会自动跑一条验证对话把常用工具的状态列出来。3. 可复制配置从 stdio 切到 SSE 模式上面那份配置用的是 stdio 模式在 CodeBuddy 对话框里调用没问题但页面里的 JavaScript 没法直接调它。这就是我第一次上传图片报 Failed to fetch 的根因——页面请求的是一个浏览器根本连不上的本地进程。解决办法是让 cos-mcp 以 SSE 模式跑起来暴露一个 HTTP 端点给页面用。3.1 全局安装 cos-mcp在终端执行npm install -g cos-mcplatest3.2 以 SSE 模式启动cos-mcp \ --Regionap-beijing \ --Bucketbucket-1302073945 \ --SecretId你的SecretId \ --SecretKey你的SecretKey \ --DatasetName \ --port3001 \ --connectTypesse启动后服务会监听 3001 端口SSE 端点是http://localhost:3001/sse。页面里就可以用 EventSource 去连它了。3.3 页面侧的关键改动原来的 script.js 里加载图片、上传、删除都是通过 CodeBuddy 的 MCP 通道走的页面里调不到。改成直接请求 SSE 端点function connectSSE() { return new Promise((resolve, reject) { const sseUrl new URL(http://localhost:3001/sse); sseUrl.searchParams.set(action, getBucket); sseUrl.searchParams.set(prefix, images); const sse new EventSource(sseUrl); sse.addEventListener(initialData, (event) { try { const result JSON.parse(event.data); updateGallery(result.Contents); sse.close(); resolve(result); } catch (e) { sse.close(); reject(e); } }); sse.onerror () { sse.close(); reject(new Error(SSE连接错误)); }; setTimeout(() { sse.close(); reject(new Error(SSE连接超时)); }, 10000); }); }上传和删除同理把 action 换成 putObject、deleteObject参数通过 query string 传。图片展示直接用 COS 的公开访问 URL 拼接const imageUrl https://bucket-1302073945.cos.ap-beijing.myqcloud.com/${encodeURIComponent(imageKey)};3.4 本地起个静态服务页面直接双击打开是 file:// 协议SSE 请求会被浏览器拦。用 live-server 起个本地服务npm install -g live-server cd D:/2024code/image-maneger live-server --port8080然后通过http://127.0.0.1:8080/访问。如果还是报跨域让 CodeBuddy 帮你加 CORS 头或者在 cos-mcp 启动参数里确认允许的来源。4. 验证请求一次端到端上传配置改完后别急着发布先在本地验证一遍完整链路。打开http://127.0.0.1:8080/按 F12 打开控制台。选一张图片点上传。控制台里应该能看到一条 SSE 连接建立然后返回 uploadComplete 事件。上传成功后页面会自动重新加载图片列表新图片出现在画廊里。如果上传成功但列表没刷新检查 loadImages 是不是在上传回调里被调用了。我当时的写法是在 uploadImage 的 resolve 之后手动调了一次 loadImages确保列表同步。验证通过后在 CodeBuddy 对话框里输入使用 edgeone-pages-mcp-server 发布页面CodeBuddy 会调用 Pages MCP Server把当前页面部署上去并返回一个公开 URL。复制这个 URL 到浏览器打开如果图片能正常加载、上传和删除都能用说明整条链路通了。提示发布后的页面调用的还是你本地的http://localhost:3001/sse所以线上页面要能访问你的本地 SSE 服务得一直开着。如果想让线上页面独立运行需要把 SSE 服务也部署到一台公网可访问的机器上。5. 本篇常见错排查5.1 上传失败Failed to fetch这是最常见的报错原因基本是页面在调 stdio 模式的 MCP Server。浏览器只能发 HTTP 请求连不上本地进程。换成 SSE 模式确认http://localhost:3001/sse在浏览器里能打开。5.2 加载图片报 405 MethodNotAllowed这个错误说明请求打到了 COS 的根路径而不是具体的对象。检查拼接 URL 时有没有把 objectKey 带上以及 getBucket 返回的 Contents 里 Key 字段是否正确。我遇到过一次是因为 prefix 参数写成了images而不是images/导致返回的 Key 不带目录前缀。5.3 SSE 连接超时EventSource 默认会一直重连但如果服务没起来或者端口被占就会一直超时。先在终端确认 cos-mcp 进程还在跑再检查 3001 端口有没有被其他程序占用。另外CodeBuddy 对话框里执行命令时可能会把你手动开的终端截断建议 SSE 服务单独开一个终端窗口跑别让 AI 去管它。5.4 跨域报错 CORS本地页面在 8080SSE 服务在 3001端口不同就是跨域。让 CodeBuddy 在 cos-mcp 启动参数里加允许来源或者用 live-server 的代理功能把/sse转发到 3001。最省事的办法是让 CodeBuddy 自动配置你把控制台的报错原文贴给它就行。5.5 发布后页面空白EdgeOne Pages 部署的是静态文件如果 script.js 里的请求地址还是 localhost线上访问时浏览器会去连访问者自己的 localhost当然连不上。要么把 SSE 服务部署到公网要么在发布前把请求地址改成公网地址。6. 把想法落成线上页面的下一步这套链路跑通之后最顺手的用法其实不是页面而是在 CodeBuddy 对话框里直接用自然语言调 MCP 工具。比如输入「获取文件列表」它会自动调 COS MCP Server 的 getBucket把结果列出来。对于日常的存储操作这比写代码快得多。如果你打算长期用这套组合做编码和 Agent 任务可以了解下 Coding Plan它把模型调用和工具链的额度打包在一起适合高频使用场景https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding_plan想先试试模型对话能力可以直接进模型对话页https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel_chat接入文档和 API Keys 管理在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc我自己的经验是MCP Server 在对话框里的调用很流畅但一旦涉及浏览器页面直连问题就会成倍出现。如果只是做演示用 Pages MCP Server 发布静态页面加对话框调 COS 就够了如果要做成产品还是老老实实走传统 API 网关更稳。
1. 从一句抱怨到可访问页面这条链路到底卡在哪腾讯云 COS MCP Server 加 CodeBuddy 这套组合能做的事很具体让 AI 直接读写你的对象存储把生成的页面一键发布到 EdgeOne Pages拿到一个公开可访问的 URL。适合谁适合手里有原型想法、但不想为了一次演示去搭完整前后端的人也适合想把「上传、展示、删除」这类对象存储操作交给自然语言来驱动的开发者。我这次的目标很明确做一个图片管理页面支持上传图片到腾讯云 COS、展示已上传图片、删除指定图片最后通过 EdgeOne Pages 发布成线上可访问的链接。听起来三步就能搞定实际做下来真正耗时间的不是写页面而是让页面在浏览器里稳定地调到 COS MCP Server。整条链路里最容易出问题的有三个点一是 CodeBuddy 里 MCP Server 的配置骨架SecretId、SecretKey、Bucket、Region 少一个都跑不起来二是页面直接调用 MCP 工具时的连接方式stdio 模式在浏览器里根本用不了必须换成 SSE三是本地页面和 SSE 服务之间的跨域不处理就是一堆 Failed to fetch。下面按我实际跑通的顺序拆开讲配置可以直接抄排障部分是我踩过的坑你可以对照着看。2. 前置准备密钥、存储桶与两个 MCP Server在 CodeBuddy 里配置 MCP Server 之前得先把腾讯云侧的凭证和存储资源准备好。这一步不难但顺序别乱。2.1 拿到 SecretId 和 SecretKey进入腾讯云访问管理控制台左侧菜单找到 API 密钥管理点新建密钥。弹窗里会生成一对 SecretId 和 SecretKey点复制保存下来。这两个值相当于你访问 COS 的账号密码后面配置 MCP Server 时要用。注意SecretKey 只在创建时完整显示一次关掉弹窗就看不到了。建议直接存到密码管理器里别随手丢在聊天记录。2.2 创建 COS 存储桶访问存储桶列表点创建存储桶。输入一个全局唯一的存储桶名称选一个离你近的地域比如 ap-beijing其余配置保持默认即可。创建完成后点进存储桶的概览页记下两个信息存储桶名称形如 bucket-1302073945和所属地域形如 ap-beijing。这两个值会写进 MCP 配置。2.3 在 CodeBuddy 里装 COS MCP Server回到 CodeBuddy 对话页点 MCP进入 MCP 市场搜索腾讯云 COS MCP Server点安装。配置页里填入 Bucket、Region、SecretId、SecretKeyDatasetName 是数据智能检索用的做图片管理可以不填。保存后COS MCP Server 就出现在你的 MCP 列表里了。2.4 配置 EdgeOne Pages MCP ServerPages MCP Server 负责把页面部署到 EdgeOne Pages 并返回公开链接。它需要一个 API Token。登录 EdgeOne Pages 控制台左侧切到 Pages再进 API Token 页面点创建 API Token填个描述、选个过期时间提交后复制生成的 Token。然后打开 CodeBuddy 的 MCP 配置文件把两个 Server 都写进去。完整骨架如下{ mcpServers: { TencentCloudCOSMCPServer: { command: npx, args: [cos-mcp], env: { Bucket: bucket-1302073945, DatasetName: , Region: ap-beijing, SecretId: 你的SecretId, SecretKey: 你的SecretKey } }, edgeone-pages-mcp-server: { command: npx, args: [edgeone-pages-mcp], env: { EDGEONE_PAGES_API_TOKEN: 你的API令牌 } } } }保存后MCP 列表里两个 Server 都应该是可调用状态。你可以点 COS MCP Server 右侧的三角按钮CodeBuddy 会自动跑一条验证对话把常用工具的状态列出来。3. 可复制配置从 stdio 切到 SSE 模式上面那份配置用的是 stdio 模式在 CodeBuddy 对话框里调用没问题但页面里的 JavaScript 没法直接调它。这就是我第一次上传图片报 Failed to fetch 的根因——页面请求的是一个浏览器根本连不上的本地进程。解决办法是让 cos-mcp 以 SSE 模式跑起来暴露一个 HTTP 端点给页面用。3.1 全局安装 cos-mcp在终端执行npm install -g cos-mcplatest3.2 以 SSE 模式启动cos-mcp \ --Regionap-beijing \ --Bucketbucket-1302073945 \ --SecretId你的SecretId \ --SecretKey你的SecretKey \ --DatasetName \ --port3001 \ --connectTypesse启动后服务会监听 3001 端口SSE 端点是http://localhost:3001/sse。页面里就可以用 EventSource 去连它了。3.3 页面侧的关键改动原来的 script.js 里加载图片、上传、删除都是通过 CodeBuddy 的 MCP 通道走的页面里调不到。改成直接请求 SSE 端点function connectSSE() { return new Promise((resolve, reject) { const sseUrl new URL(http://localhost:3001/sse); sseUrl.searchParams.set(action, getBucket); sseUrl.searchParams.set(prefix, images); const sse new EventSource(sseUrl); sse.addEventListener(initialData, (event) { try { const result JSON.parse(event.data); updateGallery(result.Contents); sse.close(); resolve(result); } catch (e) { sse.close(); reject(e); } }); sse.onerror () { sse.close(); reject(new Error(SSE连接错误)); }; setTimeout(() { sse.close(); reject(new Error(SSE连接超时)); }, 10000); }); }上传和删除同理把 action 换成 putObject、deleteObject参数通过 query string 传。图片展示直接用 COS 的公开访问 URL 拼接const imageUrl https://bucket-1302073945.cos.ap-beijing.myqcloud.com/${encodeURIComponent(imageKey)};3.4 本地起个静态服务页面直接双击打开是 file:// 协议SSE 请求会被浏览器拦。用 live-server 起个本地服务npm install -g live-server cd D:/2024code/image-maneger live-server --port8080然后通过http://127.0.0.1:8080/访问。如果还是报跨域让 CodeBuddy 帮你加 CORS 头或者在 cos-mcp 启动参数里确认允许的来源。4. 验证请求一次端到端上传配置改完后别急着发布先在本地验证一遍完整链路。打开http://127.0.0.1:8080/按 F12 打开控制台。选一张图片点上传。控制台里应该能看到一条 SSE 连接建立然后返回 uploadComplete 事件。上传成功后页面会自动重新加载图片列表新图片出现在画廊里。如果上传成功但列表没刷新检查 loadImages 是不是在上传回调里被调用了。我当时的写法是在 uploadImage 的 resolve 之后手动调了一次 loadImages确保列表同步。验证通过后在 CodeBuddy 对话框里输入使用 edgeone-pages-mcp-server 发布页面CodeBuddy 会调用 Pages MCP Server把当前页面部署上去并返回一个公开 URL。复制这个 URL 到浏览器打开如果图片能正常加载、上传和删除都能用说明整条链路通了。提示发布后的页面调用的还是你本地的http://localhost:3001/sse所以线上页面要能访问你的本地 SSE 服务得一直开着。如果想让线上页面独立运行需要把 SSE 服务也部署到一台公网可访问的机器上。5. 本篇常见错排查5.1 上传失败Failed to fetch这是最常见的报错原因基本是页面在调 stdio 模式的 MCP Server。浏览器只能发 HTTP 请求连不上本地进程。换成 SSE 模式确认http://localhost:3001/sse在浏览器里能打开。5.2 加载图片报 405 MethodNotAllowed这个错误说明请求打到了 COS 的根路径而不是具体的对象。检查拼接 URL 时有没有把 objectKey 带上以及 getBucket 返回的 Contents 里 Key 字段是否正确。我遇到过一次是因为 prefix 参数写成了images而不是images/导致返回的 Key 不带目录前缀。5.3 SSE 连接超时EventSource 默认会一直重连但如果服务没起来或者端口被占就会一直超时。先在终端确认 cos-mcp 进程还在跑再检查 3001 端口有没有被其他程序占用。另外CodeBuddy 对话框里执行命令时可能会把你手动开的终端截断建议 SSE 服务单独开一个终端窗口跑别让 AI 去管它。5.4 跨域报错 CORS本地页面在 8080SSE 服务在 3001端口不同就是跨域。让 CodeBuddy 在 cos-mcp 启动参数里加允许来源或者用 live-server 的代理功能把/sse转发到 3001。最省事的办法是让 CodeBuddy 自动配置你把控制台的报错原文贴给它就行。5.5 发布后页面空白EdgeOne Pages 部署的是静态文件如果 script.js 里的请求地址还是 localhost线上访问时浏览器会去连访问者自己的 localhost当然连不上。要么把 SSE 服务部署到公网要么在发布前把请求地址改成公网地址。6. 把想法落成线上页面的下一步这套链路跑通之后最顺手的用法其实不是页面而是在 CodeBuddy 对话框里直接用自然语言调 MCP 工具。比如输入「获取文件列表」它会自动调 COS MCP Server 的 getBucket把结果列出来。对于日常的存储操作这比写代码快得多。如果你打算长期用这套组合做编码和 Agent 任务可以了解下 Coding Plan它把模型调用和工具链的额度打包在一起适合高频使用场景https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding_plan想先试试模型对话能力可以直接进模型对话页https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel_chat接入文档和 API Keys 管理在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc我自己的经验是MCP Server 在对话框里的调用很流畅但一旦涉及浏览器页面直连问题就会成倍出现。如果只是做演示用 Pages MCP Server 发布静态页面加对话框调 COS 就够了如果要做成产品还是老老实实走传统 API 网关更稳。
