节点服务反应在本地工作但不在heroku上答案

【问题标题】：node serving react working locally but not on heroku节点服务反应在本地工作但不在heroku上
【发布时间】：2018-03-26 12:00:37
【问题描述】：

我制作了一个简单的 create-react-app 应用程序和一个 node.js express 服务器端。在本地这可以工作（服务器服务于 ui 并做 api）但是在部署到 heroku 时仅提供 UI（任何 API 调用都会获得 503 代码）

App.js

// Routes

// works both locally and on heroku
app.get('/ui', (req, res) => {
  res.sendFile(path.resolve(__dirname,'build','index.html'));
});

// works only locally
app.use('/users',users);
app.use('/pledge',pledge);

反应路由器

 <ThemeProvider theme={theme}>
                <div>
                    <Router history={history}>
                        <div>
                            <Route path={'/ui/'} component={Header}/>
                            <Route exact={true} path='/ui/welcome' component={Welcome}/>
                            <Route exact={true} path="/ui/login" component={Login}/>
                            <Route exact={true} path="/ui/help" component={Help}/>
                            <Route exact={true} path="/ui/dashboard" component={DashBoard}/>
                            <Route exact={true} path='/ui/logout' component={Logout}/>
                            <Route exact={true} path='/ui/pledge' component={Pledge}/>
                            <Route exact={true} path='/ui/buckets' component={Bucket}/>
                            <Route exact={true} path='/ui/add' component={AddStuff}/>
                            <Route exact={true} path='/ui/motion' component={MotionInput}/>
                            <Route exact={true} path='/ui/status' component={Status}/>
                        </div>
                    </Router>
                </div>
            </ThemeProvider>

没有服务器端渲染。 API 示例：

app.post('/usersAdd',(req, res) => {

  let newUser = new User(req.body);
  newUser.save((err) => {
    if (err)
      return res.send(500, {error: err});

    return res.send("successfully saved");
  });
});

API 调用

export function getUsers() {
    return new Promise((resolve, reject) => {
        axios.get(serverProps.server + serverProps.getUsers, {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        })
            .then(resolve)
            .catch(reject);
    });
}

【问题讨论】：

你用的是快递吗？
是的，我是。需要其他代码吗？

标签： javascript node.js reactjs express heroku

【解决方案1】：

这是因为在部署时，当要路由 /users 时，它会查找任何名为 users.html 的文件但没有找到，因此返回 503。您可以通过将所有路由重定向到 index.html 来修复它，方法是替换您的app.get 拨打电话：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

看看here。看看它是否有效。

【讨论】：

谢谢，但是现在像 /users 这样的服务器端 API 调用不起作用，我得到一个 html 页面
我不明白 API 调用如何受此影响。您是否使用服务器端渲染？如果可以的话，你能分享一下代码吗？
我看过你的代码，我想知道你是如何在前端使用这些 API 的。你用 axios 吗？
是的，axios 发布和获取，我已将此添加到我的问题中g
您是否删除了这些行：app.use('/users',users); app.use('/pledge',pledge);。如果是，那么我不能说是什么导致了给定代码的问题。可能是你如何使用 axios 的问题。