javascript - 将 NodeJs 与 React 结合使用

Question

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

目前我正在做的是在端口 3000 上运行 Node 和 React 在端口 3001 上

现在，我的 Node 我有这条路线

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

这里 console.log 显示了当我手动转到 localhost:3000 时的用户详细信息，但是如果我从我对上面给定的 url 的 react 中发出 axios 请求，它会显示 undefined .

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

现在，req.user 是从 passport google Strategy 和我那里得到的东西，因为来自 localhost:3000 的日志显示数据，而来自 localhost:3001 的日志不显示数据。

我是否以正确的方式使用 Node 感到困惑？即通过 axios 发送请求并通过 res.json

获取数据

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

我只是想知道 res.render 在 NodeJS 中对 react 的等价性

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

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'
  }
};

对于简单的获取请求，您可以将选项参数留空。

---

在后端( Node +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);
};

对于 express 服务器 ( 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 explaination and Browser support statushttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

fetch explaination and Browser support statushttps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API