前端vue加后端nodejs开发api接口连接不成功，如何解决？

遇到问题

图1

图2

图3

图4

图5

前端代码

使用潘家诚的简洁版： https://github.com/PanJiaChen/vue-admin-template
并结合尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)
https://www.bilibili.com/video/BV1Vf4y1T7bw/?p=124&spm_id_from=333.880.my_history.page.click&vd_source=aa9601c318773b6b8cd043eaf05b9f77

部分前端代码：

图1

图2

图3

图4

后端代码

黑马程序员Node.js全套入门教程，nodejs新教程
https://www.bilibili.com/video/BV1a34y167AZ?p=81&vd_source=aa9601c318773b6b8cd043eaf05b9f77

部分后端代码

图1

图2

图3

图4

node服务端,body的中间件你没加上

// 解析post的两个中间件
app.use(express.json())
// 你只加了这个
// app.use(express.urlencoded({ extended: true }))

这个错误提示太简洁，无法确定具体出错的原因，但是通常可以从以下几个方面排查：

1 确认后端nodejs服务已经启动并且监听了正确的端口。可以在命令行中输入netstat -ano | findstr :端口号 (Windows系统) 或者 lsof -i :端口号 (Linux系统) 查看端口是否被监听。如果没有监听，则需要启动服务。

2 确认前端vue代码中请求的API接口地址是否正确。可以在浏览器中手动输入API地址，看看是否能够正确返回数据。

3 确认前端vue代码中的请求方式（例如是GET还是POST），是否与后端nodejs代码中的路由设置匹配。如果前端vue代码中请求方式与后端nodejs代码中的路由设置不匹配，那么也会导致连接失败。

4 如果前端vue代码和后端nodejs代码不在同一个服务器或者同一个域名下，需要进行跨域设置。可以在后端nodejs代码中设置CORS，或者在前端vue代码中使用代理解决跨域问题。

如果以上方法都不能解决问题，建议查看具体的错误日志或者调试信息，更精确地定位问题所在。

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
从提供的截图和代码来看，出现连接不成功的原因可能有以下几点：

前端请求地址和后端提供的地址不一致。
前端请求时没有携带token，而后端需要token验证。
后端接口逻辑有问题，无法正确返回数据。

针对这些问题，可以逐一排查。

检查请求地址

首先，需要检查前端代码中请求的地址是否和后端提供的地址一致。根据提供的代码来看，前端默认请求的地址是服务端根路径 /dev-api，而后端提供的api接口也是以该路径作为前缀。

但是，我们可以从你提供的截图中看到，实际请求地址的路径是 /api/products，而不是 dev-api/products。这个问题可能出在代码中，比如前后端约定的地址不一致，或者是在开发环境和生产环境中部署的路径不一致等等。需要仔细检查代码并确保请求地址正确无误。

检查token验证

另外一个可能的问题是前端请求时没有携带token，而后端需要token验证。需要检查后端代码中是否正确过滤了无token请求，或者是前端在请求时是否附带了正确的token信息。

根据你提供的后端代码，看起来后端确实需要token验证，并且验证规则是从请求头中获取。前端代码中调用接口的 headers 部分没有指定token信息，可能是缺少了这部分代码。示例如下：

this.$http.get('/api/products', {
  headers: {
    // 这里加上对应的token信息
    'Authorization': 'Bearer ' + token
  }
}).then(response => {
  // 处理响应数据
}).catch(error => {
  // 处理错误信息
})

在这里，我们使用 Authorization 请求头携带 token，注意在token前面加上 Bearer 前缀，以便后端识别。

检查后端接口逻辑

最后，需要检查后端接口的逻辑是否正确，是否能够正确返回数据。可以使用postman等工具，直接请求后端接口来测试接口是否可达，是否能够正确返回数据。如果后端接口出现了错误，需要根据控制台输出的错误信息来定位具体的问题，并尝试解决它。

关于解决问题的具体代码，由于提供的信息比较有限，可能需要更多的上下文信息才能够精确地判断出问题所在。建议可以根据上面提供的几个点来逐一排查，并通过调试来定位具体的问题。
如果我的回答解决了您的问题，请采纳！

不知道你这个问题是否已经解决, 如果还没有解决的话:

看下这篇博客，也许你就懂了，链接：前端毕业设计：Nodejs+Vue菜鸟驿站仓库管理系统的设计与实现

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^