React+Node电商项目DevTools Network无数据且source map报404错误

问题排查结果 #

你看到的两个DevTools报错完全不影响项目功能，报错路径以chrome-extension://开头，属于你本地Chrome浏览器安装的扩展程序自身加载源映射文件失败导致的，和你写的后端代码没有任何关系，不需要修改你的项目代码来处理这个报错，你也可以直接在无痕模式下打开项目页面，就能避开扩展程序的相关报错。

未出现XHR请求的解决方法 #

你已经验证了localhost:5000和localhost:5000/api/products可以正常访问，说明后端服务运行完全正常，没有在Network面板看到对应XHR请求的原因有两个：

• 你还没在前端React代码中编写向/api/products发起请求的逻辑，按照教程进度补充对应的fetch/axios请求代码即可。
• 你把前端代理的proxy配置写在了根目录的package.json中，这个配置需要放到frontend文件夹下的package.json里才会生效，否则前端开发服务器无法把接口请求代理到5000端口的后端服务。

你可以先在打开的项目页面的控制台执行以下代码验证接口连通性，执行后就能在Network面板看到对应的XHR请求：

fetch('http://localhost:5000/api/products').then(res => res.json()).then(console.log)

内容的提问来源于stack exchange，提问作者Jess