CODEWITHSUNDEEP
apireact-nativelaravel-5localhost
LPFJ
LPFJ

Reputation: 195

How to Connect to an API in Your React Native With Expo?

Api

Api is made by laravel in my local environment.

ApiController

public function test(Request $request)
{
    $test = Test::all();
    return response()->json($test, 200);
}

When I get http://127.0.0.1:8000/api/test, it works.

React Native With Expo

When I did expo start, this project has started on http://localhost:19002/

App.js

componentDidMount() {
  axios
    .get('http://127.0.0.1:8000/api/test')
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
}

I got an error:(

Network Error
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/adapters/xhr.js:80:22 in handleError
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:575:10 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:389:6 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

I check this project on Expo Client App on iPhone.

I would appreciate it if you could give me any advice:)

Upvotes: 2

Views: 8161

Answers (1)

BloodyMonkey
BloodyMonkey

Reputation: 1634

Expo doc say:

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

https://docs.expo.io/versions/v37.0.0/react-native/network/#using-fetch

Upvotes: 3

Related Questions