0

我有一个在 Express 后端运行的 React 应用程序；该网站运行良好。

在一个专用 URL - herokuapp.com/apii - 我想显示一个 JSON 数据提要（例如，像这样），它将用于移动应用程序从中获取数据

这是我的app.js（服务器）：

const express = require('express'),
      path = require('path'),
      mongoose = require('mongoose'),
      bodyParser = require('body-parser'),
      passport = require('passport');

const app = express();
const apii = require('./backend/routes/apii');
...
// Serve static files from the React app -- added because of Heroku, the local app doesn't need this
app.use(express.static(path.join(__dirname, 'frontend/build')));

app.use(passport.initialize());
require('./backend/passport')(passport);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/apii', apii);
app.get('*', function(request, response) {
    response.sendFile(path.resolve(__dirname, './react-ui/build', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running on PORT ${PORT}`);
});

module.exports = app;

然后，./backend/routes/apii：

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

router.get('/', function(req, res, next) {
    var testObject = {
        "AppName": "MongoPop",
        "Version": 1.0
    }
    res.json(testObject);
});

module.exports = router;

这是 React 的路由：

export default class App extends Component {
    render() {
      return (
          <Provider store = { store }>
            <Router>
              <div>
                <Navbar />
                <Router exact path="/" component={ Home } />
                <div className="container">
                    <Route exact path="/home" component={ Home } />
                    <Route exact path="/about" component={ About } />
                </div>
              </div>
            </Router>
          </Provider>
        );
    }
}

像herokuapp.com/home或herokuapp.com/about这样的路由运行良好，但是，当我尝试将浏览器放入 herokuapp.com/apii时，我得到一个空白页面，JSON 对象testObject没有显示（只有一个空白的白色页面，如前所述）。

但是，如果我将 URL herokuapp.com/apii放到Postman，我确实会看到testObject： 在此处输入图像描述

为什么 JSON 结构没有在浏览器中呈现？

先感谢您

4

0 回答 0