如何使用 Expo 在您的 React Native 中连接到 API？

Question

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:)

Answer 1

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