I can not configure the proxy in the create-react-app

Question

I am a beginner in React, and I am developing a project based on the react documentation.

The back-end api server is created as node.js and managed by PM2 as http: // localhost: 4005. The front end created the project with create-react-app.

To refer to the api of the backend, I set up the proxy settings referring to this manual.

I tried both the package.json proxy configuration and the manual configuration using http-proxy-middleware, but it did not work.

Proxy is configured, but the webpack dev-server calls itself as shown below.

yarn start message(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)

Browser Console Message :

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

(Port 63323 is the port specified by react.)

My Project Directory looks like this:

Express Server 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;

package.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"
}

It is no different than the posting I refer to as an example, but I want to know what I missed.

Answer 1

I think you need to return 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 });
        })