你需通过火山引擎获取ARK_API_KEY和Endpoint ID，再用Vercel或Cloudflare Workers搭建后端代理绕过CORS与认证限制，最后前端fetch调用代理接口实现豆包AI嵌入。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在自己的个人网页里嵌入豆包AI的对话能力，让访客能直接和AI聊天，但发现官方没提供现成的JS SDK、调用时总报401或CORS错误、前端直连被浏览器拦截——这说明你正卡在身份认证、跨域限制与请求构造三个关键环节上。
第一步：在火山引擎开通服务并拿到两个核心凭证
豆包AI不开放独立API入口，所有调用必须经由火山引擎ARK平台统一鉴权。个人开发者无需企业资质，但【必须完成实名认证】，否则创建不了API Key。
访问火山引擎控制台（https://console.volcengine.com/ark），登录后按顺序操作：
① 左侧菜单进入「API密钥管理」→点击「创建API Key」→命名如“my-portfolio-ai”，创建后【立即复制保存ARK_API_KEY】（仅显示一次，丢失需重新生成）；
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
② 进入「模型服务」→「模型中心」→搜索“Doubao-lite-128k”→点击「开通」（免费额度足够个人站使用）；
③ 进入「在线推理」→「创建推理接入点」→名称填“doubao-web”→模型选刚开通的Doubao-lite-128k→地域选cn-beijing→创建成功后复制Endpoint ID（形如ep-xxxxxx）。
此时你已拥有ARK_API_KEY和Endpoint ID，缺一不可。
第二步：配置后端代理绕过浏览器CORS限制
浏览器禁止前端JavaScript直接向https://ark.cn-beijing.volces.com发起跨域请求，强行调用会触发OPTIONS预检失败。你不能把ARK_API_KEY写在HTML里暴露给所有人，必须用自己服务器中转。
方法一：用Vercel Edge Function（零运维，适合静态站）
在项目根目录新建api/doubao/route.ts：
import { type NextRequest } from 'next/server'; export async function POST(req: NextRequest) { const body = await req.json(); const response = await fetch('https://ark.cn-beijing.volces.com/api/v3/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.ARK_API_KEY}` }, body: JSON.stringify({ model: process.env.ENDPOINT_ID, messages: body.messages || [{ role: 'user', content: 'Hi' }], stream: false }) }); return Response.json(await response.json()); }
部署前，在Vercel后台环境变量中填入ARK_API_KEY和ENDPOINT_ID，值从第一步获取。
方法二：用Cloudflare Workers（支持自定义域名，响应更快）
登录workers.cloudflare.com → 创建服务 → 粘贴以下代码：
export default { async fetch(request, env) { const { messages } = await request.json(); const resp = await fetch('https://ark.cn-beijing.volces.com/api/v3/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${env.ARK_API_KEY}` }, body: JSON.stringify({ model: env.ENDPOINT_ID, messages, temperature: 0.7 }) }); return resp; } };
【注意：Cloudflare Workers免费版每30万请求/月，够个人站撑半年】
第三步：前端页面发起安全请求
你的HTML文件里不需要任何SDK，只需原生fetch调用自己代理的URL：
const userInput = document.getElementById('user-input').value; fetch('/api/doubao', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userInput } ] }) }).then(r => r.json()).then(data => { const reply = data.choices?.[0]?.message?.content || 'AI未返回有效内容'; document.getElementById('chat-output').textContent = reply; });
如果用Vue3，直接在setup()里调用上述fetch逻辑，无需额外库；React同理，用useEffect + useState封装即可。
务必确保代理URL路径与你部署的路径一致，Vercel是/api/doubao，Cloudflare Workers需配自定义路由如https://yourdomain.com/ai。
