express-generator和react应用程序网络错误500 (内部服务器错误)

Question

我第一次创建了一个带有express后端的react应用程序。刚开始的时候我已经遇到了一个问题。当我在浏览器中运行react应用程序时，我得到了一个网络500错误，并且我试图从后端访问的信息没有显示出来。以下是我在express文件夹routes/users中更改的代码：

var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  //res.send('respond with a resource');

  res.json([{
    id: 1,
    username: "sam"
  }, {
    id: 2,
    username: "allie"
  }]);
});

module.exports = router;

下面是我的react应用程序中的app.js文件：

import React, { Component } from 'react';
import './App.css';

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

  componentDidMount() {
    fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

我在屏幕上看到的就是app.js文件中的'Users‘h1标签。有没有关于为什么我得到网络错误的帮助？

Answer 1

您应该尝试获取整个后端域。如果您同时在本地使用react和express，则很可能在不同的端口上运行它们，因此在fetch方法的第一部分中编写整个localhost，例如

fetch("http://localhost:8000/users)

而不是。