7

Environment

I'm developing a mobile app with React Native and Expo.

Also, developing api with Laravel that is in my local environment. (http://localhost:8000/)

This app is working on Expo client app.

What I'm trying to do

I wanna get datas from api.

Code

App.js

componentDidMount() {
  return fetch('http://localhost:8000/api/test')
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
    })
    .catch((error) => {
      console.error(error);
    });
}

Error

TypeError: Network request failed

Expo version

3.22.3

I would appreciate it if you could give me any advice.

LPFJ
  • 187
  • 1
  • 4
  • 13

3 Answers3

8

you should not use http://localhost:8000 for your base URL, please use your IP Address.

if you use Macbook, you can find the IP in System Preferences > Network

find ip

then use fetch('http://172.20.10.5:8000/api/test') in your react native app.

if my base URL when access via browser is http://172.20.10.5:8000/mysite/api/test you need fetch in react native fetch('http://172.20.10.5:8000/mysite/api/test')

basically, android & ios did not allow request using HTTP, you need to do something below to allow HTTP connection instead of HTTPS.

android

and then add android:usesCleartextTraffic="true" in your Android manifest android/app/src/main/AndroidManifest.xml

iphone

add this in info.plist

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
moxspoy
  • 154
  • 1
  • 4
  • Thank you. I changed to my IP address, but it didn't work :( – LPFJ Jul 17 '20 at 04:09
  • can i know your full URL in your Browser/Postman for accessing the datas? also make sure your computer (server) and your device must be on the same local network. Wifi and lan shares the same network. – moxspoy Jul 17 '20 at 04:23
  • My full URL is http://localhost:8000/api/test. My computer and iPhone are on the same network. – LPFJ Jul 17 '20 at 04:51
  • add android:usesCleartextTraffic="true" in Android manifest – moxspoy Jul 17 '20 at 07:04
  • Is that related? I'm using expo client app on iPhone. – LPFJ Jul 17 '20 at 07:11
  • yeah it is related, check my edited answer and let me know if it works. – moxspoy Jul 17 '20 at 07:24
  • Android manifest and info.plist don't exist cuz I'm using expo :( – LPFJ Jul 17 '20 at 07:45
  • unfortunetaley, expo blocked HTTP request. see https://forums.expo.io/t/how-to-enable-ios-http-requests/1794 – moxspoy Jul 17 '20 at 07:55
  • what you can do is enable HTTPS in localhost on your laravel project, you can refer to https://laracasts.com/discuss/channels/laravel/use-httpslocalhost8000-to-start-server – moxspoy Jul 17 '20 at 07:55
  • Thank you for helping me. I'll let you know when something goes well. – LPFJ Jul 17 '20 at 08:45
5

Try using http://10.0.2.2/api/test

Emulators has special IP Address for localhost connection.

Check this table out

Read about it here

Lolz
  • 51
  • 1
  • 2
-1

if after this it not work, disable you firewall

Max Ngassa
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 01 '22 at 08:15