react-redux-universal-hot-example 的 /api 代理设计：从演示 API 到真实后端接口的完整分步教程

react-redux-universal-hot-example 的 /api 代理设计从演示 API 到真实后端接口的完整分步教程【免费下载链接】react-redux-universal-hot-exampleA starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform项目地址: https://gitcode.com/gh_mirrors/re/react-redux-universal-hot-examplereact-redux-universal-hot-example 是一套基于 Express、React、Redux 和 Webpack 的通用Universal/同构Web 应用模板内置了一个演示 API 服务器和一条/api代理链路。本文带你读懂这套API 代理设计的完整工作原理并手把手教你如何把它切换到真实后端接口——从环境变量、http-proxy 代理到跨域处理一步都不落。第一步先跑起来感受演示 API 的效果先克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/re/react-redux-universal-hot-example cd react-redux-universal-hot-example npm install执行npm run dev后会看到终端里并行启动了三个进程客户端热重载、Node 服务器3000 端口和演示 API 服务器3030 端口。打开http://localhost:3000就能看到首页、Widgets、Survey 等页面正常渲染数据全部来自那个跑在 3030 端口的演示 API 想动手改克隆仓库后建议先读官方安装文档 InstallingTheKit.md。第二步看懂演示 API 的内部结构整个演示 API 都住在 api/ 目录里核心文件是 api/api.js。它做了三件事启动一个 Express 应用监听APIPORT默认 3030把 URL 路径映射成 action 函数靠 api/utils/url.js 里的mapUrl把/api/widget/load这样的路径逐段匹配到 api/actions/ 下的函数挂了个 socket.ioio.path(/ws)让实时消息走/ws路径。action 的组织方式很直观api/actions/index.js 导出了loadInfo、login、logout、widget、survey等模块。拿 api/actions/widget/load.js 举例它用setTimeout模拟 1 秒的异步数据库读取还有 33% 概率故意失败——这正是为了演示前端如何优雅处理 API 错误。配置层面package.json 的betterScripts统一注入PORT: 3000和APIPORT: 3030两个环境变量服务器和 API 都从 src/config.js 读取APIHOST/APIPORTapiHost: process.env.APIHOST || localhost, apiPort: process.env.APIPORT,第三步/api 代理链路全解析这套设计的精髓在于浏览器永远不知道你的 API 服务器在哪。整条链路分两侧客户端浏览器src/helpers/ApiClient.js 中的formatUrl会给所有请求拼上/api前缀例如请求http://localhost:3000/api/widget/load。服务端Nodesrc/server.js 用http-proxy把/api前缀的请求转发到http://apiHost:apiPort默认localhost:3030const proxy httpProxy.createProxyServer({ target: targetUrl, ws: true }); app.use(/api, (req, res) { proxy.web(req, res, {target: targetUrl}); });同一文件里的 server.js 错误处理 还专门捕获了代理异常如ECONNRESET统一返回 500 JSON避免 API 挂了把整个页面拖垮。为什么同一段业务代码要分两种 URL因为 SSR 渲染发生在 Node 里可以直接访问http://localhost:3030而浏览器没有 Node 环境只能走相对路径/api由服务器代转。ApiClient用__SERVER__标志一次性解决了这个问题业务 action 完全不用关心跑在哪一侧。为什么非要绕一层代理官方文档 docs/ApiConfig.md 解释得很清楚API 地址可以放在 Node 环境变量里随部署环境切换开发/预发/生产指向不同后端而浏览器端代码始终只写/api既绕过了 CORS 跨域问题又让配置集中在服务器一侧统一管理。第四步接入真实后端接口4 步切换法演示玩熟之后按下面 4 步即可换掉演示 API1️⃣ 在 package.json 中配置 APIHOST在betterScripts相关段落的env中加入APIHOST指向你的真实后端域名。src/config.js 已经会自动读取它。如果开发和生产端口或 http/https 协议不一致建议直接把协议和端口写进APIHOST省掉单独的APIPORT。2️⃣ 调整 ApiClient.js 的协议前缀打开 src/helpers/ApiClient.js服务端分支里写死了http:// config.apiHost。如果你的APIHOST已经带了https://就要删掉这里的硬编码前缀避免拼出http://https://...这种畸形地址。3️⃣ 修改 server.js 中的代理配置这是最容易被忽略的一步重点有三个协议target若已含协议去掉http:// 拼接WebSocket演示应用用 socket.io所以有ws: true。你的真实 API 不用 WebSocket 的话可以删掉它和 server.js 里的upgrade监听changeOrigin如果 API 域名和前端域名不同务必加上changeOrigin: true否则很多网关会因 Host 头不匹配而拒绝请求const proxy httpProxy.createProxyServer({ target: config.apiHost, changeOrigin: true });4️⃣ 删掉演示 API确认新后端可用后按 docs/ApiConfig.md 的清单清理删除api/目录和bin/api.js并移除 package.json 中的start-dev-api、start-prod-api相关脚本及lint里的api参数。常见坑速查 ⚠️现象原因与对策改了代理配置不生效修改server.js后必须重启 Node 服务器浏览器报 CORS 错误客户端请求没走/api前缀直连了后端地址代理返回 500 proxy_error查看控制台proxy error日志通常是APIPORT与真实后端端口不一致socket 消息收不到真实 API 不带/ws时记得删掉ws: true和io.path相关代码小结react-redux-universal-hot-example 的/api代理设计用三个关键文件串起了完整链路api/api.js 提供演示数据、src/helpers/ApiClient.js 统一拼装请求地址、src/server.js 负责代理转发。理解这条链路后你只需配置APIHOST、微调协议与changeOrigin就能把脚手架平滑接入自己的真实后端——这也是所有通用 React 应用都适用的经典模式。【免费下载链接】react-redux-universal-hot-exampleA starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform项目地址: https://gitcode.com/gh_mirrors/re/react-redux-universal-hot-example创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考