express-generator 和 react app - 网络错误 500（内部服务器错误）答案

【问题标题】：express-generator and react app - network error 500 (internal server error)express-generator 和 react app - 网络错误 500（内部服务器错误）
【发布时间】：2021-06-07 23:40:56
【问题描述】：

我是第一次创建一个带有 express 后端的 react 应用程序。我一开始就遇到了一个问题。当我在浏览器中运行 react 应用程序时，出现网络 500 错误，并且未显示我试图从后端访问的信息。这是我在快速文件夹路由/用户中更改的代码：

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 文件中的“用户”h1 标签。关于为什么我收到网络错误的任何帮助？

【问题讨论】：

标签： node.js reactjs express http-status-code-500

【解决方案1】：

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

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

改为。

【讨论】：