Я не могу настроить прокси в приложении create-реагировать - PullRequest
Новая
       47

Я не могу настроить прокси в приложении create-реагировать

0 голосов
/ 16 января 2019

Я новичок в React и занимаюсь разработкой проекта на основе документации реагирования.

Внутренний API-сервер создается как node.js и управляется PM2 как http: // localhost: 4005. Внешний интерфейс создал проект с помощью create-реагировать-приложение.

Чтобы обратиться к API бэкэнда, я настроил параметры прокси-сервера в соответствии с этим руководством .

Я попробовал как настройку прокси package.json, так и ручную настройку с использованием http-proxy-middleware, но она не сработала.

Прокси настроен, но dev-сервер webpack вызывает себя, как показано ниже.

enter image description here

сообщение о начале пряжи (реакция) 

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 - это порт, указанный в response.)

Мой каталог проектов выглядит так:

enter image description here

Экспресс-сервер 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);

Реагировать на просмотр 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"
}

Это ничем не отличается от публикации, которую я называю примером , но я хочу знать, что я пропустил.

1 Ответ

0 голосов
/ 16 января 2019

Я думаю, вам нужно вернуть 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 });
        })
...