ECONNREFUSED ошибка для create-реагировать-приложение и сервер узла - PullRequest
Новая
       26

ECONNREFUSED ошибка для create-реагировать-приложение и сервер узла

0 голосов
/ 24 сентября 2018

Я создаю MERN-приложение с create-реагировать-app (поэтому нет пользовательского веб-пакета) и сервер узла.Я использую nodemon для перезапуска изменений в бэкэнде, и проблема в том, что примерно половина времени кажется, что мой интерфейс пытается выполнить рендеринг, прежде чем nodemon сможет перезапустить сервер узлов, что приводит к ошибке ECONNREFUSED.

Я могу решить проблему, просто обновив страницу, но раздражает необходимость повторять это несколько раз, и я хотел бы просто выяснить, в чем проблема.Этого не происходит, если я запускаю сервер узлов вместо nodemon.

Вот соответствующая часть моего клиентского пакета package.json: 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
},
"proxy": "http://localhost:7777"

и серверного пакета package.json: 

"scripts": {
   "client-install": "npm intall --prefix client",
   "start": "node server.js",
   "server": "nodemon server.js",
   "client": "cd client && npm start",
   "dev": "concurrently \"npm run server\" \"npm run client\""
}

и мой server.js 

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const path = require('path');
const routes = require('./routes/index');
require('dotenv').config();

const app = express();

app.use(bodyParser.json());

mongoose.connect(process.env.DATABASE, {useNewUrlParser: true})
    .then(() => console.log('MongoDb connected'))
    .catch(err => console.log(`Mongo error ${err}`))

const port = process.env.PORT || 7777;

app.use('/', routes);

if (process.env.NODE_ENV === 'production') {
    // Serve any static files
    app.use(express.static(path.join(__dirname, 'client/build')));
    // Handle React routing, return all requests to React app
    app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
    });
}

app.listen(port, () => {
    console.log(`Connected at port ${port}`)
})

Я использую axios для своих внешних HTTP-запросов: 

import axios from 'axios';
import FormData from 'form-data'
import keys from '../keys';

export const getPosts = () => {
    return axios.get('/api')
}
export const post = (file, bodyInfo) => {
    let formData = new FormData();
    formData.append('file', file[0], file[0].name);
    formData.append('bodyInfo', JSON.stringify(bodyInfo));
    return axios.post('/api', formData, {
        headers: {
            'Content-Type': `multipart/form-data; 
              boundary=${formData._boundary}`,
          }
    })
}
export const getSinglePhoto = (id) => {
    return axios.get(`/api/${id}`);
}
export const postUser = (userDetails) => {
    console.log(userDetails);
    return axios.post('/api/user', userDetails)
}
export const getUser = () => {
    return axios.get('/user');
}
export const removeUser = (id) => {
    return axios.delete(`/user/${id}`)
}

и вот мои маршруты: 

router.get('/api', postController.getPosts);
router.post('/api', 
    postController.type, 
    postController.uppic,
    postController.cloudinary
);
router.get('/api/:id', postController.getSingle);
router.get('/user', userController.getUser);
router.post('/api/user', userController.postUser);
router.delete('/user/:id', userController.removeUser);

1 Ответ

0 голосов
/ 25 сентября 2018

Попробуйте использовать CORS вместо package.json прокси.Я помню случайные / прерывистые проблемы с подключением, когда я использовал один.Вкратце: интерфейс работает на порту 3000, а express API работает на 5000.При компиляции оба запуска на 5000 и express обслуживают скомпилированный интерфейсный js и действуют как API.

Очень похожи на настройку, но без проблем с соединением:

express server package.json 

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=production node app.js",
    "server": "NODE_ENV=development nodemon app.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "seeds": "NODE_ENV=development node seeds.js"
},
...

client / package.json (с использованием sass-компилятора, который можно использовать / игнорировать). 

...
"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
},
...

client / src / actions / axiosConfig.js (затем я создаю конфигурацию axios, чтобы автоматически указывать на мой Express API, работающий на 5000) 

import axios from 'axios';

export const app = axios.create({
    baseURL: 'http://localhost:5000/api/',
    withCredentials: true
})

client / src / actions / authActions.js (затем импортировать axios config) 

import { app } from './axiosConfig';

const signinUser = props => dispatch => (
    app.post(`signin`, { ...props })
    .then(({data}) => {
        dispatch({ type: types.SET_SIGNEDIN_USER, payload: data })
        dispatch(fetchAvatarOnLogin());
    })
    .catch(err => dispatch({ type: types.SERVER_ERROR, payload: err }))
);

express server.js (я использую consign для импорта всехфайлы): 

const express   = require('express');
const app       = express();
const consign   = require('consign');

consign({ locale: 'en-us', verbose: false})
    .include('libs/middlewares.js')
    .then("database")
    .then("shared")
    .then("services")
    .then("controllers")
    .then("routes")
    .then('libs/server.js')
    .into(app);

Однако эквивалент будет: 

// APP REQUIRED IMPORTS
const express   = require('express');
const app       = express();
...etc

// APP MIDDLEWARES
...
app.use(cors({credentials: true, origin: http://localhost:3000})) // allows receiving of cookies from front-end
app.use(morgan('tiny')); // logging framework
app.use(bodyParser.json()); // parses header requests (req.body)
app.use(bodyParser.urlencoded({ extended: true })); // allows objects and arrays to be URL-encoded
...etc

// DATABASE CONFIG/CONN


// APP SHARED FUNCS


// APP SERVICES (passport, sendgrid mailer, ...etc)


// APP CONTROLLERS
...
signin: (req, res, done) => passport.authenticate('local-login', err => (
        (err || !req.session) ? sendError(err || badCredentials, res, done) : res.status(201).json({ ...req.session }))
    )(req, res, done)
...etc

// APP ROUTES
...
app.post('/api/signin', signin);
...etc

// EXPRESS SERVER
if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));   

    app.get('*', (req, res) => res.sendFile(path.resolve('client', 'build', 'index.html')));
}

app.listen(5000);
...