Node.js React Native |未处理承诺JSON解析错误

Node.js React Native |未处理承诺JSON解析错误,node.js,api,react-native,authentication,Node.js,Api,React Native,Authentication,我尝试使用react native和nodejs中编写的一些api创建一个简单的登录/注册系统。对于身份验证系统,我使用jwt 这是我的登录API的代码: router.post('/login', async (req, res) => { const { error } = loginValidation(req.body); if ( error ) return res.status(400).send(error.details[0].message); //Che

我尝试使用react native和nodejs中编写的一些api创建一个简单的登录/注册系统。对于身份验证系统,我使用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);
});
这是用react native编写的登录表单的代码:

<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>
问题是在单击按钮时出现的。我有一个错误:

[未处理的承诺拒绝:语法错误:JSON解析错误:意外标识符eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9]

tryCallOne中的node_modules/promise/setimmediate/core.js:37:14

node_modules/promise/setimmediate/core.js:123:25 in

。。。框架内部的8个堆叠框架

编辑 console.logresponse返回以下内容:

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",
}

我认为问题在于:

res.header'auth-token',token.sendtoken

您基本上是按原样发送令牌,而不是按json发送。 但在前端代码中,您需要json

尝试这样做:

res.header('auth-token', token).send({token: token});
在后端,使用而不是res.send:它将强制负载为JSON.stringify,并相应地指定内容类型。或者手动jsonify令牌:res.sendJSON.stringifytoken

因为您的问题是前端需要JSON,但您的服务器发送的是普通数据:您的令牌(应用了JSON.stringify)将封装在双引号中,使其在另一端可读为JSON。

将return response.JSON更改为response并删除console.log。

将代码编辑为

.then((response) => response.text())
.then((res) => {console.log("res is",res);}

响应是什么样子的?@DaveNewton我不明白你的意思不,问题是Persistry对你发送回来的所有数据都做了同样的处理:例如:res.status400.send{message:'Email not found'}你收到的消息意味着API的响应不是有效的json。在返回响应之前,请尝试放置一个console.logresponse。jsonI只需使用console.logresponse的结果编辑我的问题。您能提供一段代码作为示例吗?
.then((response) => response.text())
.then((res) => {console.log("res is",res);}