反应本机 TypeError:网络请求失败并使用 fetch() [英] React native TypeError: Network request failed with fetch()

问题描述

我正在使用 React native 开发一个 android 应用程序.通过这个获取请求，我收到错误 TypeError: network request failed:

I'm using React native for developing an android application. With this fetch request I'm getting the error TypeError: network request failed:

fetch('https://pixabay.com/api/?key=MY_KEY&q='+ this.props.jsondata.city.name +'&lang=en&image_type=photo&orientation=horizontal&category=travel&safesearch=true')
        .then(response => {
            console.dir(response);
            if (!response.ok) {
                throw Error(data.statusText);
            }
            return response.json();
        })
        .then(json => {
            console.log(json.hits[0].largeImageURL)
            this.setState(() => {
                return {backImage: json.hits[0].largeImageURL};
            });
        })
        .catch(err => {
            console.log('Unable to search image! ' + err);
        });

我已经在网上搜索过，但是这个问题只出现在 localhost 地址或 http 上，我的情况不是这样.该请求位于 componentDidMount() 函数内.我在应用程序的另一个地方提出了类似的请求(具有相同的结构)，但那里没有错误.我正在使用真正的 android 设备来测试应用程序，使用 android 原生代码编译的 react-native 应用程序.

I've already searched online but this problem appears only with localhost addresses or http, that is not my case. The request is inside the componentDidMount() function. I've made a similar request (with the same structure) in an another place of the application but there is no error there. I'm using a real android device to testing the app with the react-native app compiled in android native code.

推荐答案

我也遇到了同样的问题.

I had the same problem.

通常，当您的网络不安全时(例如，如果您使用 http 连接而不是 https)会发生此错误.

In general, this error occurs when your network is not secure (for example, if you use an http connection instead of https).

如果您查看官方文档，您会发现以下警告.

If you check the official documentation, you will find the warning below.

在 Android 上，从 API 级别 28 开始，默认情况下也会阻止明文流量.可以通过在应用清单文件.

On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting android:usesCleartextTraffic in the app manifest file.

因此，您可以尝试在通常位于 android/app/src/main/AndroidManifest.xml 的 AndroidManifest.xml 文件的应用程序声明中添加 android:usesCleartextTraffic="true".

So you can try adding android:usesCleartextTraffic="true" in the application declaration of your AndroidManifest.xml file usually located at android/app/src/main/AndroidManifest.xml.

如果这在我的情况下不起作用，您可以检查清单中是否有 android:networkSecurityConfig 声明.如果有，请转到文件的位置(在我的情况下为 @xml/network_security_config")并添加您想要信任的自定义域.这是一个例子:

If this doesn't work as in my case, you can check if there is an android:networkSecurityConfig declaration in your manifest. If there is, go to the location of the file ("@xml/network_security_config" in my case) and add your custom domain that you want to trust. Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">localhost</domain>
        <!-- add your domain like below -->
        <domain includeSubdomains="true">192.168.8.103</domain>
        <domain includeSubdomains="true">pixabay.com</domain>
    </domain-config>
</network-security-config>

这篇关于反应本机 TypeError:网络请求失败并使用 fetch()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！