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

Question

Api

Api 由 laravel 在我的本地环境中创建。

Api控制器

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

当我得到 http://127.0.0.1:8000/api/test 时，它起作用了。

React Native 与 Expo

我做的时候expo start，这个项目已经在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);
      });
}

我收到一个错误:(

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

我在 iPhone 的 Expo Client App 上检查了这个项目。

如果您能给我任何建议，我将不胜感激:)

Answer 1

Expo 文档说：

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

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

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

api

localhost

laravel-5

react-native