我使用react.js
和express.js
并在我的fetch
请求中收到404错误。
我只是想让我的路线返回testing express.js...
[app.js]
'use strict';
const NODE_ENV = process.env.NODE_ENV;
const PORT = process.env.PORT;
const next = require('next');
const express = require('express');
const api = require('./api');
const client = next({ dev: NODE_ENV === 'development' });
const clientHandler = client.getRequestHandler();
const app = express();
client.prepare().then(() => {
app.use('/api', api);
app.get('*', (req, res) => clientHandler(req, res));
});
const listener = app.listen(PORT, err => {
if (err) throw err;
console.log('listening on port: %d', listener.address().port); //eslint-disable-line
});
[/ API / index.js]
'use strict';
const express = require('express');
const app = express();
app.get('/api/test', function (req, res) {
res.send('testing express.js...');
});
module.exports = app;
[Body.js]
import React from 'react';
export default class Body extends React.Component {
constructor(props) {
super(props);
this.fetchContacts = this.fetchContacts.bind(this);
}
componentDidMount() {
this.fetchContacts();
}
async fetchContacts() {
const res = await fetch('/api/test');
const contacts = await res.json();
log(contacts);
this.setState({ contacts });
}
render() {
return <div>hello world!</div>;
}
}
问题:为什么我收到404错误?
答案 0 :(得分:1)
要使/api/test
路线正常工作,您需要更改此信息:
app.get('/api/test', function (req, res) {
res.send('testing express.js...');
});
到此:
app.get('/test', function (req, res) {
res.send('testing express.js...');
});
您的路由器已经在查看/api
,因此当您在路由器上为/api/test
添加路由时,您实际上正在为/api/api/test
创建路由。要解决此问题,请进行以上更改。
此外,您的index.js文件不应使用app
对象。它应该使用express.Router()
对象,尽管app
对象也是一个路由器,所以它可能有用,但它不是应该这样做的。
答案 1 :(得分:0)
这不是在nodejs上加载react JS文件的方法,请遵循以下基本(React + NodeJS)指南:
https://blog.yld.io/2015/06/10/getting-started-with-react-and-node-js/#.Wd7zSBiWbyg
或使用“create-react-app”: