TraeWork开发APP需调用真实后台服务，须完成三项配置：确认后台已就绪（如curl验证health接口）、配置API基础地址（通过.env或axios baseURL）、处理跨域（Trae代理规则）及注入Token（localStorage存储、请求头携带、401跳转登录）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用TraeWork开发APP时，需要让前端能调用真实后台服务而非模拟接口，否则无法完成登录、数据提交等核心功能。这要求你明确区分本地调试与线上联调两个阶段，并在Trae中完成API地址绑定、跨域处理、Token注入三项关键配置。
确认后台服务已就绪
先确保你的后台已启动并可被访问：打开终端执行 curl http://localhost:3000/health，返回 {"status":"up"} 才算成功。如果报错 Connection refused，说明后端没运行或端口不对，【必须先解决这个再进下一步】。
若后台部署在远程服务器，需确认该服务器防火墙已放行对应端口（如8080），且域名已解析到服务器IP。Trae本身不提供后端托管能力，它只负责生成和调用代码。
在Trae中配置API基础地址
方法一：修改环境变量文件
打开项目根目录下的 .env 文件，在末尾添加一行：VUE_APP_API_BASE_URL=http://localhost:3000（Vue项目）或REACT_APP_API_BASE_URL=http://localhost:3000（React项目）。保存后重启开发服务器。
方法二：全局Axios实例注入
在 src/utils/request.ts 中找到 axios.create() 调用处，将 baseURL 改为实际后端地址：baseURL: import.meta.env.VUE_APP_API_BASE_URL || 'http://localhost:3000'。这一步能避免每个API调用都写完整URL。
注意：不要把生产环境地址写死在代码里。Trae生成的代码默认会读取环境变量，所以只需改 .env 文件即可切换测试/正式地址。
处理跨域问题（仅限本地开发）
第一步：进入 Trae 左侧「设置」→「开发服务器」→「代理配置」
第二步：点击「+ 添加代理规则」
第三步：填入以下内容：
请求路径前缀：/api
目标地址：http://localhost:3000
启用 HTTPS 代理：否
这样所有以 /api 开头的请求都会被 Trae 开发服务器自动转发到 localhost:3000，浏览器看不到跨域错误。但上线后必须由 Nginx 或后端网关统一处理，不能依赖前端代理。
注入用户认证凭证
① 在登录成功回调中，将后端返回的 token 存入 localStorage：localStorage.setItem('auth_token', res.data.token)
② 修改 request.ts 的请求拦截器，加入 Authorization 头：config.headers.Authorization = `Bearer ${localStorage.getItem('auth_token')}`
③ 在响应拦截器中监听 401 状态码，自动跳转登录页：if (error.response?.status === 401) { window.location.href = '/login' }
这三步缺一不可。漏掉第②步，后台永远收不到 token；漏掉第③步，用户登录失效后会卡在空白页。
