时间戳

首页 > 解决方案 > 如何在没有本地主机的情况下将数据从反应发送到 nodejs？

javascript - 如何在没有本地主机的情况下将数据从反应发送到 nodejs？

问题描述

我正在尝试将 reactjs 和 nodejs 应用程序部署到 heroku。我已经成功部署了前端，但是前端正在使用 localhost 向 nodejs 发送数据，因此当通过 heroku 运行应用程序时，只有前端正在工作。

此代码将数据发送到 nodejs。 

saveUserJson = (User) =>{
    const url = 'http://localhost:5000/write'
    axios.post(url,User)
    .then(response => {
        //console.log(response);
    });
  }

这是 nodejs 代码（忽略代码中的主机名）。

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const morgan = require('morgan');
const cors = require('cors');
const jsonData = require('../src/descriptors/bnk48.json')

const app = express();
const port = 5000;
const hostname = '192.168.43.113';

app.use(bodyParser.json());
app.use(morgan('dev'));
app.use(cors());

app.get('/',(req,res) => res.status(200).send({
    message: "Server is running..."
}));


const WriteTextToFileSync =  (contentToWrite) => {
    fs.writeFileSync('./src/descriptors/bnk48.json',contentToWrite,(err) =>{
        //console.log(contentToWrite);
        if(err) {
            console.log(err);
        }else {
            console.log('Done writing to file successfully...')
        }
    })
}
const user = {

}
app.post('/write',(req,res,next) =>{
    const user = {
        "name": req.body[0].name,
        "descriptors": req.body[0].descriptors
    }
    jsonData[user.name]=user
    //console.log(req.body[0].descriptors)
    const requestContent = JSON.stringify(jsonData,null,2);
    WriteTextToFileSync(requestContent)
});

app.use((req,res,next) => res.status(404).send({
    message: "Couldn't find specified route that was requested..."
}));

app.listen(port,hostname,()=>{
    console.log(
        `
        !!! server is running..
        !!! Listening for incoming requests on port ${port}
        !!! Server running at http://${hostname}:${port}/
        !!! http://localhost:5000
        `
    )
})

如何更改 localhost 以便在部署时自动选择发送数据的位置？

标签： javascriptnode.jsreactjsherokubackend

解决方案

如何更改 localhost 以便在部署时自动选择发送数据的位置？

有几种方法可以做到这一点，但为此目的使用环境变量是很常见的。这些是由环境设置的，您的开发机器是一个环境，而您在 Heroku 上的生产站点是另一个环境。例如，您可以定义环境变量BACKEND_ROOT_URL来保存站点的架构和 FQDN，并像这样进行 axios 调用：

saveUserJson = (User) =>{
    const url = `${process.env.BACKEND_ROOT_URL}/write`
    axios.post(url,User)
    .then(response => {
        //console.log(response);
    });
  }

的构建时间值url会有所不同，具体取决于您在哪个环境中执行构建。

可以通过多种方式在本地设置环境变量。在 Bash shell 中，您可以手动设置它们，例如 export BACKEND_ROOT_URL=http://localhost:5000. 不过，这很快就会很无聊，所以我建议您查看dotenv，它可以有效地为您处理这个问题。

Heroku 有自己的方式来处理 envvars 的设置 - 检查文档here

推荐阅读