xcode React-native IOS：网络请求失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38862837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-native IOS: Network request failed
提问by Agent Zebra
I'm testing a react native app (on OS X Yosemite in the xcode simulator v9.2 / xcode 7.2.1). I'm getting a Network request failederror with the below code. The actual url with the correct appid works just fine in a browser and gives me the correct information in json format, and the promise / api call looks fine.
我正在测试本机应用程序（在 xcode 模拟器 v9.2 / xcode 7.2.1 中的 OS X Yosemite 上）。我得到一个Network request failed错误与下面的代码。具有正确 appid 的实际 url 在浏览器中工作正常，并以 json 格式为我提供正确的信息，并且 promise / api 调用看起来不错。
I'm not behind a firewall. I've tried troubleshooting the connection, and activating the Allow HTTP Servicesin the Developer settings, but I'm still getting the error.
我不在防火墙后面。我已经尝试对连接进行故障排除，并Allow HTTP Services在开发人员设置中激活，但我仍然收到错误消息。
Any idea what the problem is here? The actual errors are as follows:
知道这里有什么问题吗？实际错误如下：
-- There has been a problem with your fetch operation: Network request failed
-- Api call error = Network request failed
Here's the api.js code:
这是 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;
});
}
Here's the index.ios.js code.
这是 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);
采纳答案by while1
You will need to change your NSAppTransportSecurity policy in info.plist. By default in ios 8 and greater plaintext request are blocked. See Transport security has blocked a cleartext HTTP
您需要在 info.plist 中更改您的 NSAppTransportSecurity 策略。默认情况下，ios 8 和更大的纯文本请求被阻止。请参阅传输安全已阻止明文 HTTP
回答by Agent Zebra
Ok thanks to @while1's answer above, I found the answer that worked for me. The code in my question above is fine. I had to change the info.plist file. Wow what a pain in the ass apple are, why would they complicate things so extremely?
好的，感谢上面@while1 的回答，我找到了对我有用的答案。我上面问题中的代码很好。我不得不更改 info.plist 文件。哇，屁股苹果真是太痛苦了，为什么他们要把事情搞得这么复杂？
I basically added the following to the info.plist file.
我基本上将以下内容添加到 info.plist 文件中。
<key>NSAllowsArbitraryLoads</key>
<true/>
Like this:
像这样：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
See more info on this in the link in @while1's answer above.
在上面@while1 的回答中的链接中查看有关此的更多信息。
回答by Ashok R
your code looks familiar to me seems you're learning Build apps with react native course offered by Stephen Grider.
您的代码对我来说看起来很熟悉，似乎您正在学习使用 Stephen Grider 提供的 React Native 课程构建应用程序。
Even i had this issue.
即使我有这个问题。
include delete GLOBAL.XMLHttpRequest;at the beginning of api.js file.
包含delete GLOBAL.XMLHttpRequest;在 api.js 文件的开头。
Like this:
像这样：
delete GLOBAL.XMLHttpRequest;
var _ = require('lodash');
var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxxxxxxxxxxxxxxxxxx';
