javascript - 我无法在 create-react-app 中配置代理

Question

我是 React 初学者，我正在根据 React 文档开发一个项目。

后台api服务器创建为node.js，PM2管理为http://localhost:4005。 前端使用create-react-app创建项目。

为了引用后端的api，我设置代理设置引用this manual .

我尝试了 package.json 代理配置和使用 http-proxy-middleware 的手动配置，但都没有用。

代理已配置，但 webpack dev-server 调用自身，如下所示。

yarn 开始消息( react )

You can now view client in the browser.

  Local:            http://localhost:63323/
  On Your Network:  http://172.30.1.13:63323/

Note that the development build is not optimized.
To create a production build, use yarn build.

[HPM] Error occurred while trying to proxy request /api/getList from localhost:63323 to http://localhost:4005/ (ETIMEDOUT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

浏览器控制台消息:

List.js:19 GET http://localhost:63323/api/getList 
net::ERR_CONNECTION_REFUSED
list:1 Uncaught (in promise) TypeError: Failed to fetch

(63323端口是react指定的端口)

我的项目目录如下所示:

Express 服务器 index.js

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"];
    console.log('Sent list of items:',list);
    res.json(list);
});


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

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

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

React View list.js

import React, { Component } from 'react';

class List extends Component {
    // Initialize the state
    constructor(props){
        super(props);
        this.state = {
            list: []
        }
    }

    // Fetch the list on first mount
    componentDidMount() {
        this.getList();
    }

    // Retrieves the list of items from the Express app
    getList = () => {
        fetch('/api/getList')
            .then(res => {
                console.log('res!');
                res.json();
            })
            .then(list => {
                console.log('fetch list : ', list);
                this.setState({ list });
            })
    }

    render() {
        const { list } = this.state;

        return (
            <div className="App">
                <h1>List of Items</h1>
                {/* Check to see if any items are found*/}
                {list.length ? (
                    <div>
                        {/* Render the list of items */}
                        {list.map((item) => {
                            return(
                                <div>
                                    {item}
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <div>
                        <h2>No List Items Found</h2>
                    </div>
                )
                }
            </div>
        );
    }
}

export default List;

包.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "http-proxy-middleware": "^0.19.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "PORT=4001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:4005"
}

这与我称为 example 的帖子没有什么不同，但我想知道我错过了什么。

Answer 1

我认为你需要返回 res.json()

    fetch('/api/getList')
        .then(res => {
            console.log('res!');
            return res.json(); // Must be returned
        })
        .then(list => {
            console.log('fetch list : ', list);
            this.setState({ list });
        })