【问题标题】：Node (Express) / React app only works locallyNode (Express) / React 应用程序仅在本地工作
【发布时间】：2018-02-08 18:33:30
【问题描述】：

问题大纲

我有一个简单的 Node / React 应用程序，使用 heroku local 运行良好。

Node 后端有一个 /api/users 端点，它返回一些硬编码的 JSON。

在heroku local 之后，访问localhost:5000/users 按预期工作，按照Users.js React 组件显示硬编码的用户。

但是，当推送到 Heroku 时，只有 / 根页面有效。转到/users 显示Not Found，转到/api/users 返回JSON。

我不确定为什么它在本地工作而不是在 Heroku 上工作，感谢任何帮助。

代码

快车路线：

var express = require('express');
var router = express.Router();
var path = require('path');

router.get('/api/users', function(req, res, next) {

  res.json([{id: 1, name: 'Colin'}, {id: 2, name: 'Spodie'}])
});

module.exports = router;

Express app.js 文件：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cors = require('cors');

var config = require('./config/dev')
var index = require('./routes/index');

var app = express();
app.use(cors())

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// serve static files from React 
app.use(express.static(path.join(__dirname, '../frontend/build')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

React App.js 文件：

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Users from './Users';
import NotFound from './NotFound';
import Home from './Home';

class App extends Component {
  state = {users : []}

  render() {
    return (
      <div>
        <Switch>
        <Route exact path='/' component={Home}/>
        <Route exact path='/users' component={Users}/>
        <Route component={NotFound} />
        </Switch>
      </div>
    );
  }
}

export default App;

反应 api.js 文件：

const api = process.env.BACKEND_URL || 'http://localhost:5000'

export const getUsers = () => (
  fetch(`${api}/api/users`)
    .then(res => res.json())
)

反应包.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

截图

在本地运行的主页

在 Heroku 上运行的主页

在本地运行的用户页面

在 Heroku 上运行的用户页面

【问题讨论】：

请分享您的express 配置（app.js 等）和路线。
@OzgurGUL 我已经用一些代码更新了这个问题。谢谢。

标签： node.js reactjs express heroku

【解决方案1】：

您正在提供静态文件，但您还需要将所有 HTTP GET 请求转发到客户端反应路由器，以便它可以处理。你可能想把这条路线放到你的app.js：

app.get("*", function (req, res) {
    res.sendFile(__dirname + "/path/to/index.html")
})

【讨论】：