将 NodeJ 与 React 结合使用

Question

在 React 中使用 NodeJs 的正确方法是什么？

目前我正在运行Node on port 3000 和React on port 3001

现在，我的节点我有这条路线

app.get("/", (req, res) => {
  console.log(req.user)
 res.json(req.user)
})

这里console.log 在我手动转到localhost:3000 时显示用户详细信息，但是如果我从对上述给定网址的反应中发出 axios 请求，它会显示未定义。

  componentWillMount() {
             axios.get("http://localhost:3000/").then(response => {
                 console.log(response)
             }).catch(error => {
                 console.log(error)
             })
        }

现在，req.user 是从护照谷歌战略和我获得的，因为来自 localhost:3000 的日志显示了数据，而来自 localhost:3001 的日志没有显示数据。

如果我以正确的方式使用节点，我会感到困惑吗？即通过axios发送请求并通过res.json获取数据

此外，由于大部分教程或我遵循的教程都使用 EJS 而不是 React，而用户大多使用 res.render

我只是想知道 res.render 在 NodeJS 中的等效性

[更新：]我正在通过谷歌浏览器中的插件启用跨源资源共享

Answer 1

编辑：在与 OP 的讨论中，我发现这很可能是与护照身份验证中间件相关的问题。原始答案如下。

---

看起来像一个 CORS 问题，因为您的前端提供服务器位于端口 3001 上，后端位于 3000 上。我可以向您展示我使用它的方式（在 react+node CORS 设置中，尽管问题无关使用 React）并且我没有 CORS 问题：

在前端我使用本机浏览器的获取：

const fetchRelative = async (path, options) => {

    const url = new URL('http://localhost:3000/' + path);

    return await ((await fetch(url, options)).json());
};

这里使用了 async/await 语法。我正在使用 babel 进行转译，但也许浏览器本身就支持。

提供的获取选项例如：

{
  method: 'POST',
  body: JSON.stringify(order),
  headers: {
    'Content-Type': 'application/json',
     'Accept': 'application/json'
  }
};

对于简单的 get 请求，您可以将 options 参数留空。

---

在后端（节点+koa 服务器）我使用这个：

const Koa = require('koa');
const koaBody = require('koa-body');
const cors = require('koa-cors');

const startServer = (port) => {

    const server = new Koa();

    server.use(cors({ origin: '*', allowMethods: ['GET', 'POST', 'DELETE', 'PUT', 'OPTIONS'] }));

    server.use(koaBody());    
    
    server.use(bindRoutes());
    
    server.listen(port);
};

快递服务器（https://expressjs.com/en/resources/middleware/cors.html）基本相同。

bindRoutes 只是将 koa-router 配置提取到一个单独的文件中：

const Router = require('koa-router');
const bindRoutes = () => {
    const router = new Router();

    router.get('restaurants', async (ctx) => {
        ctx.body = 'abc;
    });

    return router.routes();
};

这里没有使用CORS插件。

附言

async/await 说明和浏览器支持状态 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

获取解释和浏览器支持状态 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 2

您可以在不同的端口上同时运行 Node 服务器和 React 应用程序，并将 React 应用程序代理回您的 Node 服务器。这可以在没有 CORS 插件的情况下完成。关于如何设置的更多细节在这里：https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0