Question

将NodeJ与React一起使用的正确方法是什么？

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

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

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

此处console.log会在我手动转到localhost:3000时显示用户详细信息，但是如果我根据上述给定的URL做出axios请求，则会显示未定义。

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

现在，req.user是从护照google Stratergy和我那里得到的，因为来自localhost：3000的日志显示数据，而来自localhost：3001的日志不显示数据。

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

获取数据

另外，由于本教程或我遵循的大多数教程都使用EJS代替了React，而用户主要使用res.render

我只是想知道Res.render在NodeJS中的反应等效性

[更新：] 我正在通过Google chrome中的插件启用跨源资源共享

Answer 1

EDIT：在与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());
};

此处使用了异步/等待语法。我正在使用babel进行转换，但也许浏览器本身支持该功能。

提供的用于获取的选项例如：

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

对于简单的获取请求，您可以将options参数保留为空。

在后端（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);
};

与快递服务器（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插件。

P.S。

异步/等待说明和浏览器支持状态   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

将NodeJ与React结合使用

2 个答案:

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