React-Native |Необработанное обещание JSON Parse error

Question

Я пытаюсь создать простую систему входа / регистрации, используя react-native, и некоторые API написали в nodejs.Для системы аутентификации я использую jwt.

Это код моего API входа в систему:

router.post('/login', async (req, res) => {
  const { error } = loginValidation(req.body);
  if ( error ) return res.status(400).send(error.details[0].message);

  //Checking if the mail exists
  const user = await User.findOne({email: req.body.email});
  if ( !user ) return res.status(400).send('Email not found');

  //Password is correct
  const validPassword = await bcrypt.compare(req.body.password, user.password);
  if ( !validPassword ) return res.status(400).send('Invalid password');

  //Create and assign the JWT
  const token = jwt.sign({_id: user._id}, process.env.TOKEN_SECRET);
  res.header('auth-token', token).send(token);
});

И это код для формы входа, записанный в реагирующем языке:

<View style={{flex: 4, justifyContent: 'center', width: '100%'}}>
  <View style={{height: '70%', width: '100%'}}>
    <Text style={styles.question}>
      ACCEDI
    </Text>
    <View style={{width: '100%', paddingTop: '5%', paddingHorizontal: '10%'}}>
      <Form
        ref='form'
        options={options}
        type={User}
        value={this.state.value}
        onChange={this._onChange}
      />
    </View>
    <View style={{width: '100%', flexDirection:'row', alignItems: 'center'}}>
      <View style={{width: '10%'}}></View>
      <View style={{width: '70%'}}>  
        <TouchableOpacity style={styles.buttonpassword} onPress={ () => this.props.navigation.navigate('pippo') }>  
          <Text style={styles.signup}>
            Hai dimenticato la password?
          </Text>
        </TouchableOpacity>
      </View>  
    </View>
    <View style={{alignItems: 'center'}}>
      <View style={{height: 50, width: 150, alignItems: 'center', paddingTop: '2%'}}>
        <TouchableOpacity style={styles.button} onPress={this._handleAdd}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</View>

КогдаПри нажатии login button вызывается функция _handleAdd.Эта функция содержит следующий код:

_handleAdd = () => {
    const value = this.refs.form.getValue();
    console.log(value);
    if ( value ) {
      const data = {
        email: value.username,
        password: value.password
      }
      fetch('http://localhost:3000/api/user/login', {
        method: 'POST',
        cache: 'no-cache',
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        }
      })
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .then((body) => {
        console.log(body);
        alert(data);
      });
    }
    else {
      alert('All filds are require');
    }
  }

Проблема заключается в нажатии кнопки.У меня есть эта ошибка:

[Необработанное отклонение обещания: SyntaxError: Ошибка синтаксического анализа JSON: непредвиденный идентификатор "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"]

• * 1023 / sematemomate.js: 37: 14 в tryCallOne

• node_modules / обещание / setimmediate / core.js: 123: 25 в

• ... 8больше стековых фреймов из внутренних компонентов фрейма

РЕДАКТИРОВАТЬ

console.log(response) возвращает это:

Response {
  "_bodyBlob": Blob {
    "_data": Object {
      "blobId": "1311DDB1-F839-403E-9FEF-E7D3072F9AA1",
      "name": "login.html",
      "offset": 0,
      "size": 149,
      "type": "text/html",
    },
  },
  "_bodyInit": Blob {
    "_data": Object {
      "blobId": "1311DDB1-F839-403E-9FEF-E7D3072F9AA1",
      "name": "login.html",
      "offset": 0,
      "size": 149,
      "type": "text/html",
    },
  },
  "headers": Headers {
    "map": Object {
      "auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZDhmN2UyNjdlZTIwNTI5ZDI1YjUzM2IiLCJpYXQiOjE1Njk2OTAxOTV9.K_sCEXG2obYE2y-wbX02Tqq_yG8rsOCZKr1YyZlurMQ",
      "connection": "keep-alive",
      "content-length": "149",
      "content-type": "text/html; charset=utf-8",
      "date": "Sat, 28 Sep 2019 17:03:15 GMT",
      "etag": "W/\"95-Gmy4omr48TDbf5eqm/r1yJHUQRg\"",
      "x-powered-by": "Express",
    },
  },
  "ok": true,
  "status": 200,
  "statusText": undefined,
  "type": "default",
  "url": "http://localhost:3000/api/user/login",
}

Answer 1

В серверной части используйте res.json вместо res.send: это приведет к тому, что полезная нагрузка будет JSON.stringify ed и Content-Type соответственно.Это или вручную jsonify токена: res.send(JSON.stringify(token)).

Как указывалось ранее Ваша проблема в том, что ваш интерфейс ожидает JSON, но ваш сервер отправляет простые данные: ваш токен с JSON.stringify, примененный к нему, будет заключен в двойные кавычки, что сделает его читаемым как JSON с другой стороны.

Answer 2

Я думаю, что проблема здесь:

res.header ('auth-token', token) .send (token);

Вы в основном отправляетежетон обратно как есть, а не как json.Тем не менее, в вашем коде переднего плана вы ожидаете JSON.

Попробуйте сделать это:

res.header('auth-token', token).send({token: token});