前端无法直接调用智谱清言API，因其不支持CORS跨域；必须通过自建Node.js代理服务（如Express）转发请求，并严格保护API密钥不泄露到前端。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在前端项目里直接调用智谱清言API实现AI对话功能，必须绕过浏览器同源策略限制——因为智谱清言API不支持CORS跨域直连，【前端无法直接发请求到https://open.bigmodel.cn】，否则会触发OPTIONS预检失败或403错误。
为什么不能在前端JavaScript里直接调用？
智谱清言API服务端未开放Access-Control-Allow-Origin头，所有浏览器发起的fetch/AJAX请求都会被拦截。你看到控制台报“CORS policy: No 'Access-Control-Allow-Origin' header”时，不是代码写错了，是架构上根本不可行。
这一步必须放弃：删掉所有类似fetch('https://open.bigmodel.cn/api/paas/v3/model-api/glm-4/invoke', {...})的前端直连尝试。
正确接入路径：前端 → 自建代理后端 → 智谱API
第一步：用Node.js（Express）搭一个轻量代理服务，监听本地3001端口
立即学习“前端免费学习笔记（深入）”；
新建proxy-server.js，写入以下内容：
const express = require('express');<br>const axios = require('axios');<br>const app = express();<br>app.use(express.json());<br>app.post('/api/chat', async (req, res) => {<br> try {<br> const response = await axios.post('https://open.bigmodel.cn/api/paas/v3/model-api/glm-4/invoke', req.body, {<br> headers: {<br> 'Authorization': `Bearer ${process.env.ZHIPU_API_KEY}`,<br> 'Content-Type': 'application/json'<br> }<br> });<br> res.json(response.data);<br> } catch (error) {<br> res.status(error.response?.status || 500).json({ error: error.message });<br> }<br>});<br>app.listen(3001, () => console.log('Proxy server running on http://localhost:3001'));
第二步：在项目根目录创建.env文件，填入你的密钥：ZHIPU_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx——注意【密钥必须64位、无空格、无换行、无中文标点】，复制时容易多带一个空格或回车，导致401认证失败。
第三步：启动代理服务：node proxy-server.js，确保终端显示“Proxy server running on http://localhost:3001”
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
前端调用代理接口（以Vue为例）
方法一：使用fetch向本地代理发请求
const sendMessage = async (prompt) => {<br> const res = await fetch('http://localhost:3001/api/chat', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/json' },<br> body: JSON.stringify({<br> model: 'glm-4',<br> prompt: prompt,<br> temperature: 0.7<br> })<br> });<br> return res.json();<br>};
方法二：用Axios封装，自动带上baseURL避免硬编码
在src/utils/api.js中写：
import axios from 'axios';<br>export const zhipuApi = axios.create({<br> baseURL: 'http://localhost:3001/api',<br> timeout: 30000<br>});
组件内调用：const { data } = await zhipuApi.post('/chat', { model: 'glm-4', prompt: userInput });
生产环境部署注意事项
① 代理服务不能和前端共用一个域名端口，必须独立部署在后端服务器（如Nginx反向代理到Node服务）；
② 【绝对禁止把ZHIPU_API_KEY写进前端代码或打包产物里】，哪怕混淆或Base64编码也不安全——浏览器开发者工具可轻松解码；
③ 线上环境需替换http://localhost:3001为真实代理地址，例如https://api.yourdomain.com/proxy/zhipu，并在Nginx配置中添加对应location块；
④ 若使用Vercel/Netlify等静态托管平台，需改用其Serverless Function机制实现代理逻辑，不能依赖长期运行的Node进程。
