在cursor中开发react项目需四步联调：先验证后端服务运行，再配置代理解决跨域，接着封装统一请求函数自动带token，最后用cursor生成接口调用代码并检查network三要素。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中开发React项目时，要让前端页面真正动起来，必须把静态UI连上后端数据——比如商品列表要从/api/products拿，登录要POST到/api/login校验。这一步卡住很多人：光用AI生成了漂亮页面，却不会配接口地址、处理跨域、传Token、解析响应。
确认前后端服务已同时运行
先确保后端服务已在本地启动并监听正确端口，例如 Express 默认跑在 http://localhost:3001，Spring Boot 常用 http://localhost:8080。打开终端执行 curl -I http://localhost:3001/health 或直接浏览器访问该地址，看到 200 OK 才算就绪。
【必须验证】 后端没跑通就写前端请求，所有 fetch 都会报 Network Error，AI生成的代码再完美也白搭。
若后端是 Go/Gin 或 Node/Express，检查控制台是否输出类似 “Server running on http://localhost:3001” 的日志；若是 Java Spring Boot，留意是否出现 “Tomcat started on port(s): 8080”。
配置代理避免跨域（开发阶段）
React 开发服务器（vite 或 cra）默认不转发请求，直接 fetch http://localhost:3001/api/users 会触发浏览器跨域拦截。
在项目根目录 vite.config.ts（Vite）或 package.json（CRA）中添加代理配置：
方法一（Vite）：打开 vite.config.ts，往 export default defineConfig({}) 里插入 proxy 字段：
proxy: { '/api': { target: 'http://localhost:3001', changeOrigin: true, secure: false } }
方法二（CRA）：在 package.json 中加一行 "proxy": "http://localhost:3001"
【注意】 代理只在开发环境生效，build 后失效，生产环境需由 Nginx 或 CDN 统一处理跨域。
封装统一请求函数
别在每个组件里重复写 fetch，用 Cursor 生成一个 request.ts 工具函数，让它自动带上 Token 并统一错误处理：
第一步：在 src/utils/request.ts 新建文件
第二步：向 Cursor 输入：“用 TypeScript 写一个通用请求函数，支持 GET/POST/PUT/DELETE，自动读取 localStorage 中的 token 放入 Authorization 头，响应失败时抛出带 msg 的 Error”
第三步：复制生成代码，保存文件
第四步：在组件中 import { request } from '@/utils/request'，然后直接调用 request('/api/users', { method: 'GET' })
这样后续所有接口都走同一套逻辑，Token 过期、网络异常、401 跳登录页等都能集中控制。
用 Cursor 自动生成接口调用代码
当你在组件里需要加载用户列表，不必手敲 fetch —— 把光标放在组件内，唤出 Cursor Chat，输入：
“当前组件需要从 /api/users 获取用户数据，用 React useState 和 useEffect 实现，使用刚才封装的 request 函数，加载中显示 skeleton，出错显示提示框”
Cursor 会生成完整代码块，含 loading 状态管理、空数据兜底、错误重试按钮。它甚至能根据后端返回的 JSON 结构，自动生成对应的 TypeScript 接口类型 User[]。
如果后端已集成 Swagger，还可让 Cursor 读取 http://localhost:3001/swagger-json，直接拉取真实接口定义生成调用代码。
联调时检查三件事
① 打开浏览器 DevTools → Network 标签页，点击按钮后看是否有新请求发出，状态码是不是 200
② 点击该请求 → Response 标签，确认返回的是合法 JSON，不是 HTML 错误页（常见于后端路由没匹配到）
③ 点击 Headers 标签，检查 Request Headers 里是否有 Authorization 字段，Response Headers 里是否有 Access-Control-Allow-Origin: *（开发阶段）
只要这三项全绿，数据就能流进你的 React 组件里。
