Chrome获取API数据时报could not load resource及404错误如何解决？

核心根因定位 #

从报错日志main.js:62 GET http://localhost:3000/[object%20Object] 404 (Not Found)可以直接判断，问题出在请求URL拼接错误：你直接将Object类型的变量和URL字符串拼接，导致[object Object]被编码后作为URL的一部分传入，后端没有对应路径的接口，因此返回404，Chrome无法加载对应资源。

分步排查操作 #

• 打开项目中的main.js文件，定位到第62行的GET请求发起逻辑，找到拼接URL时用到的动态参数变量
• 打印该变量的类型和值确认问题：在请求逻辑前添加console.log('参数类型：', typeof 你的动态参数变量, '参数值：', 你的动态参数变量)，刷新页面复现请求，确认该变量是否是对象而非字符串、数字等可以直接拼接的基础类型
• 修正URL拼接逻辑：如果是路径参数，需要从对象中取出对应属性值再拼接，比如需要传用户ID时，正确写法是`http://localhost:3000/user/${userInfo.id}`，不能直接写`http://localhost:3000/user/${userInfo}`
• 修复后刷新页面，在Chrome控制台Network面板查看请求的完整URL，确认没有[object%20Object]字段后，接口即可正常请求

常见踩坑提示：部分开发者使用axios等请求库时，会误将整个params对象直接拼接到URL路径中，而非将路径参数单独取值拼接、query参数放到params配置项中，也会触发该报错。

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