在 React 中使用 NodeJ

IT技术 javascript node.js reactjs
2021-05-16 22:39:33

在 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但是如果我从我对上述给定 url 的react中发出 axios 请求，它显示未定义。

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

现在，req.user由于来自 localhost:3000 的日志显示数据而来自 localhost:3001 的日志不显示数据，因此这是从护照 google Stratergy 和我获取的内容。

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

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

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

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

2个回答

编辑：在与 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 进行转译，但也许浏览器本身就支持它。

提供给 fetch 的选项例如：

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

对于简单的获取请求，您可以将 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

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

其它你可能感兴趣的问题
上一篇如何使用 react router v6 在一个父组件上的组件之间切换 下一篇将标签添加到 react-select