Я пытаюсь создать 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