React native http post got Json Parse error: Unrecognized token '<'

Posted

技术标签:

【中文标题】React native http post got Json Parse error: Unrecognized token \'<\'【英文标题】:React native http post got Json Parse error: Unrecognized token '<'React native http post got Json Parse error: Unrecognized token '<' 【发布时间】:2016-06-13 19:36:22 【问题描述】:

当我尝试将数据从 react-native 发布到 php API 时,react-native 显示错误:

Json 解析错误:无法识别的令牌'

我用邮递员用标题类型'application/json'测试了 PHP API,它工作正常,这是 react-native 代码,有人可以帮我吗?提前致谢!

import React,  Component  from 'react';
import 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActivityIndicatorios,
  TextInput,
  TouchableOpacity,
 from 'react-native';

const REQUEST_URL = 'http://localhost:8000/user';

export default class extends Component 
  constructor(props) 
    super(props);
  

  _submit() 
    fetch(REQUEST_URL, 
      method: "POST",
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      ,
      body: JSON.stringify(
        firstname: "Justin", lastname: "Robot"
      )
    )
   .then((response) => response.json())
   .then((responseData) => 
       console.log(responseData.body);
   )
   .done();
  

  render() 
    return (
      <View style=styles.container>
        <TouchableOpacity
          style=styles.submitButton
          onPress=() => this._submit()
          >
          <Text>http post</Text>
        </TouchableOpacity>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  ,
  submitButton: 
    backgroundColor: 'lightskyblue',
    borderRadius: 5,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 20,
    paddingRight: 20,
  
);

【问题讨论】:

change: .then((response) =&gt; response.json()) as .then((response) =&gt; console.log(response)) ,你在控制台看到了什么? 我的猜测是您正在从服务器返回 XML 并尝试将其解析为 JSON。只是猜测。 嗨,我的 console.log(response) 为:[info][tid:com.facebook.react.javascript] type: 'default', status: 500, ok: false, statusText :未定义,标题:地图:'content-type':['text/html; charset=UTF-8'], 'x-powered-by': ['PHP/5.5.34'], 日期: ['Mon, 13 Jun 2016 20:31:03 GMT'], 主机: ['localhost: 8000' ], 'cache-control': [ 'no-cache, private' ], 连接: [ 'close' ] , url: 'localhost:8000/user', _bodyInit: '\n\n ...... 问题出在 API 上。 【参考方案1】:

我们刚刚在 React Native 中遇到了这个问题,因为我们的服务器正在通过 HTML 返回错误响应。

<html>

<head><title>413 Request Entity Too Large</title></head>

<body bgcolor="white">

<center><h1>413 Request Entity Too Large</h1></center>

<hr><center>nginx</center>

</body>

</html>

修复可以是以下任何一种:

1) 防止错误发生在您的服务器端代码中。

2) 在您的服务器上进行更好的错误处理,以返回 JSON 错误而不是 HTML 错误。

3) 编写一些客户端代码来检测返回的 HTML 并显示更有用的错误消息。

【讨论】:

以上是关于React native http post got Json Parse error: Unrecognized token '<'的主要内容,如果未能解决你的问题,请参考以下文章

在 react-native 中发送请求标头/授权 axios.post

使用 axios 在 react-native 中使用 POST 方法获取 API 数据

fetch() 在 react-native (iOS) 上做 GET 而不是 POST

Axios Post 使用 React Native 变量

在 Expo Go 上加载 Expo React Native 时遇到问题

android中的React-native POST请求通过https返回网络错误