Node (Express) / React 应用程序仅在本地工作

Posted 2023-03-07

【中文标题】Node (Express) / React 应用程序仅在本地工作

【英文标题】：Node (Express) / React app only works locally

【发布时间】：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 我已经用一些代码更新了这个问题。谢谢。

【参考方案1】：

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

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