必须通过服务端代理转发火山引擎大模型响应，前端调用 /api/chat 接口发送 user_input，服务端用 AK/SK 向 Endpoint 请求并返回 reply 字段，前端插入 DOM 前需 XSS 过滤。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在网页中实时显示火山引擎大模型的回复内容，必须通过服务端代理转发响应，避免浏览器直接调用火山引擎API时触发跨域限制和密钥泄露风险。
准备火山引擎访问凭证与模型配置
登录火山引擎控制台→进入「机器学习平台 VeDI」→选择已部署的「大模型服务」实例→复制「Endpoint URL」、「Access Key ID」和「Secret Access Key」。
在服务端代码中安全存储密钥，【绝对不可写死在前端 JavaScript 中】，否则会导致 AK/SK 泄露，他人可盗用你的配额甚至产生费用。
确认模型服务已开启公网访问权限，并检查所选模型（如 Doubao-7B、GLM-4-Flash）的输入格式要求，部分模型需额外传入 model 字段或 system_prompt。
搭建 Node.js 服务端代理接口
新建 Express 路由 /api/chat，接收前端 POST 请求中的 user_input 字段。
使用 axios 向火山引擎 Endpoint 发起 POST 请求，Header 中设置 Authorization: Bearer ${accessKeyID}:${secretAccessKey}，Content-Type: application/json。
请求体按火山引擎文档构造：{ "messages": [{ "role": "user", "content": user_input }], "model": "doubao-7b" } —— 注意字段名大小写与嵌套结构，错一个字母将返回 400 错误。
将火山引擎返回的 data.choices[0].message.content 提取出来，作为 JSON 响应 { reply: "xxx" } 返回给前端。
前端网页发起请求并渲染结果
在网页中用 fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_input: '你好' }) }) 调用代理接口。
收到响应后，把 reply 字段插入到指定 DOM 元素 innerHTML 中，例如 document.getElementById('response').innerHTML = data.reply。
这一步操作起来很简单，直接把返回文本塞进页面就行，但要注意对 reply 内容做基本 XSS 过滤——若模型可能输出含 script 标签的恶意内容，需用 DOMPurify 清洗后再插入。
