同构API请求实战react-isomorphic-starterkit如何用一层fetch-plus打通Node与浏览器【免费下载链接】react-isomorphic-starterkitCreate an isomorphic React app in less than 5 minutes项目地址: https://gitcode.com/gh_mirrors/re/react-isomorphic-starterkitreact-isomorphic-starterkit 是一个 5 分钟内就能搭起同构 React 应用的开源脚手架Koa 负责服务端渲染Webpack 双端构建React Transmit 负责数据预取与客户端水合。本文聚焦它最值得抄作业的一环——如何用 fetch-plus 搭建同构 API 请求层让同一份请求代码在 Node 和浏览器中都能直接跑通并顺带解决跨域难题。同构 API 请求为什么难做服务端渲染SSR时请求代码往往要在两个性格迥异的环境里执行环境特点直接请求外网 API 会怎样Node 服务端没有window不受 CORS 限制可以直连但浏览器端没这种自由浏览器客户端受同源策略约束外网 API 没有 CORS 头就会被拦截很多模板的做法是服务端、客户端各写一套请求逻辑结果数据不一致、维护成本翻倍。react-isomorphic-starterkit 的思路很干脆请求层只写一次通过端点endpoint抽象自动适配环境。fetch-plus把 API 封装成一个可复用的端点整个方案的灵魂只有 20 行全部在 src/apis/github.js 里const endpoint fetchPlus.connectEndpoint(githubServerUrl()); endpoint.addMiddleware(plusJson()); module.exports endpoint;它做对了三件小事connectEndpoint把一个 base URL 变成端点。之后调用githubApi.browse([repos, xxx, stargazers], { query: { page } })这样的路径数组 查询参数即可fetch-plus 会自动拼出完整 URL 并序列化 query不用手拼字符串。addMiddleware(plusJson())中间件自动把响应体解析成 JSON业务代码里.then(json ...)直接拿数据省掉到处response.json()。fetch 实现统一package.json 中同时依赖cross-fetch、fetch-plus、fetch-plus-json、fetch-plus-bearerauth——前者保证浏览器端有稳定的 fetch 实现后两者分别是 JSON 中间件和 Bearer 鉴权中间件按需挂载。一行环境开关SERVER与CLIENT切换请求地址githubServerUrl() 是环境适配的关键服务端__SERVER__直连https://api.github.com客户端__CLIENT__返回当前站点的同源路径/api/github而不是外网地址。而__SERVER__/__CLIENT__并不是运行时的判断而是由 Webpack 的DefinePlugin在打包时注入的常量见 configs/webpack.client.js 与 configs/webpack.server.js。这意味着客户端产物里服务端分支会被死代码消除体积更小同一份 src/apis/github.js 无需任何条件判断就能被双端共享这就是一层 fetch-plus 打通两端的含义。服务端反代浏览器走同源服务器转外网浏览器请求的是同源路径/api/github/...那它最终怎么到 GitHub答案在 src/server.js 里的一段 Koa 代理配置app.use(koaProxy({ host: githubApi.url, // 端点的 base URL match: /^\/api\/github\//i, map: (path) path.replace(/^\/api\/github\//i, /) }));完整数据流是这样的浏览器 →http://localhost:8000/api/github/repos/...同源 → KoakoaProxy剥掉前缀 → 转发到https://api.github.com/repos/...→ 原路返回 JSON这个设计一举三得浏览器端彻底绕开 CORSAPI 的真实地址集中收敛在服务端将来换 API 提供方或加鉴权只改端点一处即可。业务层只关心数据Transmit 预取 客户端续传请求层搭好之后业务代码可以干净到什么程度看 src/containers/Main.js 中的取数函数——它被服务端渲染和客户端续传同时复用服务端Transmit.createContainer的 fragments 在renderToString阶段预取第一页 stargazers数据随 HTML 一起输出客户端src/client.js 用Transmit.render水合之后滚动加载更多页时走的是同一个fetchStargazers只不过此时它请求的是同源代理路径。也就是说从 SSR 首屏到客户端增量加载请求链路始终是fetch-plus 端点 → 同环境地址 → 客户端时Koa 反代前后端零重复代码。快速上手步骤5 分钟跑起来git clone https://gitcode.com/gh_mirrors/re/react-isomorphic-starterkit.git cd react-isomorphic-starterkit npm install npm run watch一条npm run watch同时启动服务端与客户端的 HMR 热更新详见 README.md。生产部署则执行npm run build npm start。举一反三把它改成你自己的 API 层这套模式可以原样搬进你的项目改造点只有三处复制 src/apis/github.js 的结构把 base URL 换成自己的接口地址服务端直连、客户端走同源前缀在 src/server.js 里照抄一段koaProxy代理你的 API 前缀需要鉴权时给端点追加 fetch-plus-bearerauth 中间件统一注入 Token。核心路径速查API 请求层src/apis/服务端入口与代理src/server.js客户端水合入口src/client.js双端构建配置configs/webpack.client.js、configs/webpack.server.js小结react-isomorphic-starterkit 用fetch-plus 端点 构建期环境开关 Koa 同源反代三板斧把同构应用中最容易写歪的 API 请求收敛成一层薄薄的封装。对新手而言这 20 行 github.js 就是一份可直接照抄的同构请求层范本。【免费下载链接】react-isomorphic-starterkitCreate an isomorphic React app in less than 5 minutes项目地址: https://gitcode.com/gh_mirrors/re/react-isomorphic-starterkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考