React-native IOS：网络请求失败

Posted 2023-03-14

【中文标题】React-native IOS：网络请求失败

【英文标题】：React-native IOS: Network request failed

【发布时间】：2016-08-10 01:24:13

【问题描述】：

我正在测试一个 react 本机应用程序（在 xcode 模拟器 v9.2 / xcode 7.2.1 中的 OS X Yosemite 上）。我收到以下代码的Network request failed 错误。具有正确 appid 的实际 url 在浏览器中可以正常工作，并以 json 格式为我提供正确的信息，并且 promise / api 调用看起来很好。

我不在防火墙后面。我已经尝试对连接进行故障排除，并在开发人员设置中激活Allow HTTP Services，但我仍然收到错误消息。

知道这里有什么问题吗？实际错误如下：

-- There has been a problem with your fetch operation: Network request failed
-- Api call error =  Network request failed

这里是 api.js 代码：

var _ = require('lodash');
var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxxxxxxxxxxxxxxxxxx';

var kelvinToF = function(kelvin) 
  return Math.round((kelvin - 273.15) * 1.8 + 32) + ' ˚F'
;

var kelvinToC = function(kelvin) 
  return Math.round(kelvin - 273.15) + ' ˚C'
;  

module.exports = function(latitude, longitude) 
  var url = `$rootUrl&lat=$latitude&lon=$longitude`;
  console.log(url);
  return fetch(url)
    .then(function(response)
      return response.json();
    )
    .then(function(json)
      return 
        city: json.name,
        temperature1: kelvinToF(json.main.temp),
        temperature2: kelvinToC(json.main.temp),
        description: _.capitalize(json.weather[0].description)
      
    )
    .catch(function(error) 
    console.log('There has been a problem with your fetch operation: ' + error.message);
    throw error;
);

这是 index.ios.js 代码。

/*  --depreciated

var React = require('react-native'); 

var 
  AppRegistry,
  MapView,
  View,
  Text,
  StyleSheet
 = React;
*/ 


// updated
import React from 'react';

// updated
import 
  AppRegistry,
  MapView,
  View,
  Text,
  StyleSheet,
 from 'react-native';

var Api = require('./src/api');

var Weather = React.createClass(
  getInitialState: function() 
    return 
      pin: 
        latitude: 0,
        longitude: 0
      ,
      city: '',
      temperature1: '',
      temperature2: '',
      description: ''
    ;
  ,
  render: function() 
    return <View style=styles.container>
      <MapView
        annotations=[this.state.pin]
        onRegionChangeComplete=this.onRegionChangeComplete
        style=styles.map>
      </MapView>
      <View style=styles.textWrapper>
        <Text style=styles.text>this.state.city</Text>
        <Text style=styles.text>this.state.temperature1</Text>
        <Text style=styles.text>this.state.temperature2</Text>
        <Text style=styles.text>this.state.description</Text>
      </View>
    </View>
  ,
  onRegionChangeComplete: function(region) 
    this.setState(
      pin: 
        longitude: region.longitude,
        latitude: region.latitude
      
    );

    Api(region.latitude, region.longitude)
      .then((data) => 
        console.log(region.latitude);
        console.log(region.longitude);
        console.log('data = ' + data);
        this.setState(data);
      )
      .catch((error)=>
     console.log("Api call error = ", error.message);
    // alert(error.message);     
  );
  
);


var styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF'
  ,
  map: 
    flex: 2,
    marginTop: 30
  ,
  textWrapper: 
    flex: 1,
    alignItems: 'center'
  ,
  text: 
    fontSize: 30
  
);

AppRegistry.registerComponent('weather', () => Weather);

【参考方案1】：

好的，感谢上面@while1 的回答，我找到了适合我的答案。

我上面问题中的代码很好。我不得不更改info.plist 文件。

哇，这真是个令人头疼的问题，为什么它们会让事情变得如此复杂？

我基本上将以下内容添加到info.plist 文件中。

<key>NSAllowsArbitraryLoads</key>
<true/> 

像这样：

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

在上面@while1 的答案中的链接中查看更多信息。

【讨论】：

同样适用于基于 IP 的网址。 ?可以请回复

【参考方案2】：

您需要在 info.plist 中更改您的 NSAppTransportSecurity 策略。默认情况下，在 ios 8 和更大的明文请求中被阻止。见Transport security has blocked a cleartext HTTP

【参考方案3】：

你的代码对我来说看起来很熟悉，好像你正在学习使用 Stephen Grider 提供的 React Native 课程构建应用程序。

即使我也有这个问题。

在 api.js 文件的开头包含 delete GLOBAL.XMLHttpRequest;。

像这样：

delete GLOBAL.XMLHttpRequest;
var _ = require('lodash');
var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxxxxxxxxxxxxxxxxxx';

【讨论】：

哈哈你是对的，是的，这是从那个课程。什么是 GLOBAL.XMLHttpRequest ？我尝试了你的建议，我现在收到错误 `XMLHttpRequest is not defined' 特别是 There has been a problem with your fetch operation: XMLHttpRequest is not defined 和 Api call error = XMLHttpRequest is not defined 谢谢 Ashok。