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

【问题标题】：How to connect react js front-end with node js back-end?如何将 react js 前端与 node js 后端连接起来？
【发布时间】：2020-05-17 04:09:42
【问题描述】：

我正在开发一个在前端使用 react js 并在后端使用 express js 构建的 Web 应用程序，我也使用 MongoDB 作为数据库。

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

现在我有两个问题：

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

【问题讨论】：

例如可以使用 axios、Superagent 或 node-fetch

标签： node.js reactjs mongodb express next.js

【解决方案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，data 是你提供的用于将数据发布到节点服务器的主体。

【讨论】：

【解决方案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

检查浏览器控制台是否存在 cors 问题?

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

另一方面，Nextjs 是 服务器端渲染，两全其美，它有助于提高页面在搜索中的排名引擎，减轻客户的重担，尤其是 （低功率移动设备） 等等如果有趣，请检查此nextjs

【讨论】：