リアクションネイティブフェッチAPIはAPIに基づいて異なる動作をします

Question

現在、モバイルネイティブプロジェクトを開発するためにReact-Nativeを使用しています。私たちのアプリはAPIに依存しています。そこで、Reactのfetchメソッドを使用してAPIからデータを取得します。私たちの問題は、fetchメソッドがAPIに基づいて異なった働きをすることです。 APIを使用すると、fetchメソッドがのネットワークリクエストに失敗しましたエラー。テストするために別の公開APIを試しましたが、エラーは発生しません。

すべてのAPIをブラウザとPostman（テスト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> 
    ); 
    } 
} 

Answer 1

問題は、iOSのApp Transport Securityポリシーを中心としています。 randomuser APIはSSLですが、他のAPIはSSLではありません。

XCodeプロジェクトのinfo.plistファイルで辞書の下にNSAllowsArbitraryLoadsというキーを追加し、値はYESです。これにより、他のエンドポイントを正常にフェッチできます。