Json React本机获取API的工作方式因API而异

我们目前正在使用React Native开发一个移动项目。我们的应用程序依赖于API。因此，我们使用React的fetch方法从API获取数据。我们的问题是，fetch方法基于API的工作方式不同。当我们使用API时，fetch方法抛出网络请求失败错误。我们已经尝试了另一个公共API进行测试，它工作完美，没有错误

我在浏览器和Postman（测试API）上测试了所有API，它们都正确地显示了JSON响应。然而，我们在fetch方法上测试它，它的工作方式不同。下面是一些代码片段以了解这种情况：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AlertIOS
} from 'react-native';

class Test extends Component {
  constructor() {
    super();

    state = {
      airports: []
    }
  }

  onAfterLoad = (data) => {
    AlertIOS.alert(
      "Fetched Successfully"
    );
    this.setState({
      airports: data.airports
    });
  }

  componentWillMount() {
    // Fails
    let api1 = 'http://kolaybilet.webridge.co/api/v1/airports/ist/';
    // Fails
    let api2 = 'http://jsonplaceholder.typicode.com/posts/1/';
    // Works
    let api3 = 'https://randomuser.me/api/';

    fetch(api1)
      .then((r) => {
        return r.json();
      })
      .then(this.onAfterLoad)
      .catch((e) => {
        AlertIOS.alert("An Error Has Occurred!", e.message);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
AlertIOS
}从“反应本机”；
类测试扩展了组件{
构造函数（）{
超级（）；
状态={
机场：[]
}
}
onAfterLoad=（数据）=>{
警报(
“已成功获取”
);
这是我的国家({
机场：数据。机场
});
}
组件willmount（）{
//失败
让我们一起来看看http://kolaybilet.webridge.co/api/v1/airports/ist/';
//失败
让我们一起来http://jsonplaceholder.typicode.com/posts/1/';
//工作
让我们一起来https://randomuser.me/api/';
取数（api1）
。然后（（r）=>{
返回r.json（）；
})
.然后（此.onAfterLoad）
.catch（（e）=>{
AlertIOS.alert（“发生错误！”，e.message）；
});
}
render（）{
返回(
欢迎来到这里！
);
}
}

问题的核心是iOS中的应用程序传输安全策略。randomuser API是SSL，而其他API则不是

---

在XCode项目的

info.plist

文件中，在

NSAppTransportSecurity

字典下添加值为

YES

的密钥

nsAllowsArbiraryLoads

。这将允许您成功获取其他端点。

问题的中心是iOS中的应用程序传输安全策略。randomuser API是SSL，而其他API则不是

---

在XCode项目的

info.plist

文件中，在

NSAppTransportSecurity

字典下添加值为

YES

的密钥

nsAllowsArbiraryLoads

。这将允许您成功获取其他端点。

我假设您在

CORS

方面有问题，我不知道

fetch

是如何工作的（在我的项目中，我使用

superagent

库用于web和react本机应用程序），但是文档中有一些关于cors的问题：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

我假设您在

CORS

方面有问题，我不知道

fetch

是如何工作的（在我的项目中，我使用

superagent

库用于web和react本机应用程序），但是文档中有一些关于cors的问题：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Brice，感谢您的解决方案。我建议你修改你的答案。这是正确的，但是info.plist参数应根据更新。根据这个答案，fetch方法非常有效。非常感谢。布里斯，感谢你的解决方案。我建议你修改你的答案。这是正确的，但是info.plist参数应根据更新。根据这个答案，fetch方法非常有效。谢谢。