React - отправка правильных данных на сервер и получение ошибки
Я пытаюсь создать логин в react-native. Для этого я отправляю информацию о пользователе в веб-сервис. если информация верна, сервер вернет json
Проблема в том, что я отправляю правильную информацию о пользователе на сервер и получаю сообщение об ошибке, как будто я ввел неверную информацию
Но когда я тестирую Postman с той же информацией, я не получаю никаких сообщений об ошибках.
конструктор
constructor() {
super()
this.state = {
showPass: true,
press: false,
username: "",
password: ""
}
}
функция, которая извлекает данные
checkLogin = () => {
const { username, password } = this.state;
var url = 'https://xxxxxxx/xxxx/xxxx/xxxx/auth/login'
fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username, password
})
})
.then((response) => response.json())
.then((responseJson) => {
if (!responseJson.errors) {
this.props.navigation.navigate('foto');
console.info(username + " 1");
console.info(password + " 1");
} else {
Alert.alert('Error', responseJson.message, [{
text: 'Fechar'
}]);
console.info(username + " 2");
console.info(password + " 2");
}
})
.catch((error) => {
console.error(error);
})
Входы
<TextInput onChangeText = {text => this.setState({ username: text })} />
<TextInput onChangeText = {text => this.setState({ password: text })} />
<TouchableOpacity style = {Style.btnLogin} onPress = {() => this.checkLogin()} >
<Text style = {Style.textoLogin}>Entrar</Text>
</TouchableOpacity>
JSON, который я получаю от Postman с той же информацией, что и на входе
{
"errors": false,
"type": "-",
"line": "-",
"message": "Login successfully!",
"user": {
"user_id": 2,
"name": "xxxxxxx",
"username": "xxxxxxxx",
"email": "[email protected]"
},
"_token": "xxxxxxxxxxx"
}
да я устанавливаю
Я подозреваю, что ваше тело запроса не отформатировано так, как вы думаете. Пробовали ли вы проверить вкладку сети инструментов разработчика браузера и проверить запрос и тело, чтобы убедиться, что он отформатирован так, как ожидает ваш API? Обновлено: теперь я вижу, что это react-native. stackoverflow.com/questions/33997443/… может помочь настроить отладчик Chrome для просмотра сетевых запросов.
@LMulvey, где мне это использовать?
Может немного закомплексовать. Прежде чем пойти по этому пути, у вас есть доступ к коду этого сервера? Можете ли вы выполнить отладку и вывести из системы то, что вы на самом деле получаете от этих запросов?
Я пробовал, но приложение не запускается, если у меня включен CORS. И нет, у меня нет доступа к коду сервера
Вы проверили имя пользователя, пароль тот же, что и у вас, в текстовых файлах? тело: JSON.stringify({имя пользователя, пароль})
Не могли бы вы попробовать это без строк. Я думаю, что fetch также поддерживает объекты в качестве своего тела.
@ Рик, ты говоришь мне просто попробовать body: JSON({ username, password }) ?
Нет, только без json
@Rik не могу получить unsupported bodyinit type ошибку
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, я решил свою проблему, мне пришлось изменить свой body на FormData()
Вот код:
checkLogin = () => {
var url = 'https://xxxxx/xxxx/xxx/xxx/auth/login';
const { username, password } = this.state;
/*const username1 = this.state.username;
const password1 = this.state.password;
var data = {
"username" : this.state.username,
"password" : this.state.password
}*/
var formData=new FormData();
formData.append('username', username);
formData.append('password',password);
fetch(url, {
method: 'POST',
// body: JSON.stringify(data)
body: formData
})
.then((response) => response.json())
.then((responseJson) => {
if (!responseJson.errors) {
this.storeData(JSON.stringify(responseJson.user), responseJson._token)
this.props.navigation.navigate('foto');
} else {
Alert.alert('Error', responseJson.message, [{
text: 'Fechar'
}]);
}
})
.catch((error) => {
console.error(error);
})
в вашем коде вы устанавливаете
value = {this.state.<variable>}на TextInput?