Ошибка запроса POST - Express Сервер - Ошибка ответа на собственный сетевой запрос - PullRequest
0 голосов
/ 01 августа 2020

Я пытаюсь создать POST-запрос к своему express серверу, но получаю ошибку сбоя сетевого запроса. Я просмотрел все похожие сообщения об этом c и пока не смог решить эту проблему.

Что я сделал до сих пор:

  • У меня есть изменил маршрут POST на сервере на основе различных сообщений о переполнении стека, но вернул код, чтобы он оставался простым.
  • Я изменил запрос POST в приложении React на основе различных сообщений о переполнении стека, но вернул код для простоты.
  • Я также пытался использовать Ax ios для запросов POST / GET и получаю ту же ошибку.
  • Протестировал сервер (http://123.456.789.10:3000/login) с почтальоном - Создан запрос POST с JSON телом:
  • Переписан метод внешнего интерфейса (1/8/20) и получена необработанная ошибка отказа от обещания
{
    "email": "email@email.com",
    "password": "password"
}

и получен ответ :

{
    "message": "Successful login!"
}

Я включил код для сервера express и приложения для реагирования.

Сервер:

var express = require('express');
var router = express.Router();

var users = [
  {
    email: 'email@email.com', password: 'password'
  }
]

router.get('/', function(req, res, next) {
  res.send('Welcome to the backend server!');
});

router.post('/login', function(req, res){
  let result = users.find(user => user.email == req.body.email);
  if(result) {
    if(result.password == req.body.password) {
      res.status(200).send( {
        message: "Successful login!"
      })
    } else {
      res.status(200).send( {
        message: "Password Incorrect!"
      })
    }
  } else {
    res.status(200).send( {
      message: "User not found!"
    })
  }
});

module.exports = router;

Внешний интерфейс React Native:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator, Button } from 'react-native';

export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
    }
  }
 
  login = () => {
    const data = { email: 'email@email.com', password: 'password' };
    return fetch('http://123.456.789.10:3000/login', {
      method: 'POST', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });

  }

  render (){
    return (    
      <View style={styles.container}>
        <Button
          title="Press me"
          onPress={this.login}    
        />          
        <StatusBar style="auto" />
      </View>
    );    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Вывод в консоль:

Error:, [TypeError: Network request failed]
* [native code]:null in __expoConsoleLog
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:169:6 in registerError
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:84:8 in errorImpl
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:4 in console.error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:4 in error
* App.js:27:11 in fetch.then.then._catch$argument_0
- node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:183:16 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:396:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:144:6 in __guard$argument_0- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

ОБНОВЛЕНИЕ: G вывод новой ошибки после перезаписи интерфейса на

export default class App extends React.Component {

  constructor(){
    super();
    this.state = {
      text: ''
    };
  }

  render () {
    return (    
      <View style={styles.container}>
        <Button
          title="Press me"
          onPress={this._postData}    
        />
        <Text>{this.state.text}</Text>
        <StatusBar style="auto" />
      </View>
    );    
  }

  _postData = async () => {
    try {
      let formData = new FormData();
      formData.append('email', 'email@email.com');
      formData.append('password', 'password');

      fetch('http://123.456.789.10:3000/login', {
        method: 'POST',
        body: formData
      }).then((response) => response.json())
      .then((responseJson) => {
        this.setState({text: JSON.stringify(responseJson)})
      })
    } catch (e){
      console.log(e);
    }

  }

}

Новая ошибка:

[Unhandled promise rejection: TypeError: Network request failed]
- node_modules\whatwg-fetch\dist\fetch.umd.js:511:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
...