Question

我正在尝试构建一个具有React前端和表达后端的Web应用程序。目前，我已经构建了一个简单的react组件和一个带有几个端点的小型Express后端。我希望前端从我的/ express_backend路由中获取数据。

我同时运行前端和后端，但是在前端出现错误App.js:78 GET http://localhost:3000/express_backend 404 (Not Found)

为什么它仍尝试从端口3000读取？我的快递服务器在端口5000上运行，我以为package.json中的代理行可以解决此问题，但似乎无法正常工作。

我的目录结构如下：

├── src
|   └── index.js (express server)
|   └── package.json
|   ├── client
|       └── App.js (react component)

关于如何解决此问题的任何建议？

我的React组件：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }

  async callBackendAPI() {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if(response.status !== 200) {
      throw Error(body.message)
    }
    return body;
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        // Render the newly fetched data inside of this.state.data 
        <p className="App-intro">{this.state.data}</p>
      </div>
    );
  }
}

export default (App);

我的Express后端：

const express = require('express');
const path = require('path');

const app = express();

// serve the static files from the React App
app.use(express.static(path.join(__dirname, 'client/build')));

// an api endpoint that returns a short list of items
app.get('/api/getList', (req, res) => {
  var list = ["item1", "item2", "item3"];
  res.json(list);
  console.log('Sent list of items');
});

app.get('/express_backend', (req, res) => {
  res.send({ express: 'Express backend is connected to react' });
});

// handles any requests that don't match the ones above
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Package.json，其中包含代理条目：

{
  "name": "contacts-application",
  "version": "0.0.1",
  "description": "A simple Contacts application written using the MERN stack (Mongo, Express, React, Node) and Redux",
  "main": "app.js",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "express": "^4.16.4",
    "react": "16.5.2",
    "react-dom": "16.5.2"
  },
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "start": "node src/index.js"
  },
  "proxy": "http://localhost:5000/",
  "devDependencies": {
    "@babel/cli": "7.1.0",
    "@babel/core": "7.1.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "babel-loader": "8.0.2",
    "css-loader": "1.0.0",
    "react-hot-loader": "4.3.11",
    "style-loader": "0.23.0",
    "webpack": "4.19.1",
    "webpack-cli": "3.1.1",
    "webpack-dev-server": "3.1.8"
  }
}

为什么我的前端对话无法与快速后端进行反应？

0 个答案: