我有一个在Express后端上运行的React应用;网站运作良好。
在专用URL上- herokuapp.com/apii -我想显示一个JSON数据供稿(例如like this),该供稿可用于移动应用从< / p>
这是我的 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结构?
提前谢谢