如何将 react js 前端与 node js 后端连接起来？

Question

我正在开发一个 Web 应用程序，前端使用 React js，后端使用 express js，我还使用 MongoDB 作为数据库。

我正在学习本教程，其中 YouTuber 使用 Axios 来连接 React js 应用程序和 express js API。

现在我有两个问题：

Next JS 用于这些事情吗？如果不是，Next js 是什么？我应该像教程一样使用 Axios 吗？或者对于这种情况有更好的解决方案吗？提前谢谢你。

Answer 1

Next Js 基本上可以让您使用 React 构建服务器端渲染和静态 Web 应用程序。

您可以使用以下方式连接到使用 axios 进行反应支持的 Nodejs

axios.post(url,data, {
headers: {
    'authorization': your_token,
    'Accept' : 'application/json',
    'Content-Type': 'application/json'
}
})
.then(response => {
// return  response;
})
.catch((error) => {
//return  error;
});

其中 your_token 是身份验证令牌（如果有），url 是您要访问的 nodejs url，数据是您提供给 post 数据的正文到您的节点服务器。

Answer 2

要获取数据，您可以使用很棒的内置 fetch 或 axios 库：

fetch(/* url to your backend, eg. http://localhost:3000/mydata */
 , /* notice comma */
 /* other options, eg. method: ”post” */)
.then(response => res.json() /* convert server response from string to JSON */)
.then(data => /* your data array or object like */)

详情：MDN: fetch API

check your browser's console for cors issues

使用 create react app 你正在构建一个 单页应用程序 (SPA) 这是标准的，整个应用程序作为JS 捆绑到您的客户端浏览器，然后您只从服务器获取数据。

另一方面，Nextjs 是一个服务器端渲染，这是两个世界中最好的[=34] =], 它有助于在搜索引擎上提高页面排名，减轻客户的沉重负担，尤其是 （低功率移动设备） 等等如果有趣，请检查此 nextjs

如何将 react js 前端与 node js 后端连接起来？

How to connect react js front-end with node js back-end?

mongodb

node.js

express

reactjs

next.js