本文转载请联系精益码农公众号。最近全面负责一个前后端分离的web项目。前端使用create-react-app[1]，后端使用golang做的API服务。npxcreate-react-appmy-appcdmy-appnpmstart完成后，一个react前端工程就搭建完成了。前端老手都知道，npmstart或yarnstart在开发模式下启动reactApp：在localhost:3000调试预览前端项目，编辑器中的改动会实时反映到网页中。前端老手也知道，npmrunbuild或yarnbuild是针对生产的，将优化后的静态文件输出到build文件夹（优化构建性能，压缩输出，散列文件名）。从全栈程序员的角度来说，开发的时候最好同时启动前后端程序。快闪2：reactapp开发模式可以一键启动多个服务吗？1.安装并发插件npminstallconcurrently-D2。配置npm命令"scripts":{"start":"concurrently\"react-scriptsstart\"\"gorunmain.go\"","build":"react-app-rewiredbuild","test":"react-app-rewiredtest","eject":"react-scriptseject"}，注意上面的启动脚本内容：react-scriptsstart启动前端app，gorunmain.go启动后端api服务。3.npmstart或yarnstart启动项目开发模式，前后端项目不在同一个端口，内置axios发起的ajax请求是跨域的。解决跨域问题要么反向代理，要么让后端做CORS。这里我们使用反向代理的方式。4.React开发模式设置代理[2]create-react-app可以设置代理，只针对开发模式。要告诉开发服务器将任何未知请求代理到开发中的API服务器，请在package.json中添加一个代理字段。在package.json文件中，设置要代理的后端地址proxy："localhost:8034"，开发模式localhost:3000收到的未知请求会被前端开发服务器代理转发。参考链接[1]create-react-app：https://github.com/facebook/create-react-app[2]react开发模式设置代理：https://coursework.vschool.io/setting-up-a-全栈反应应用程序/
