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

Question

Api

Api 是由 laravel 在我的本地环境中制造的。

ApiController

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

当我得到http://127.0.0.1:8000/api/test时，它可以工作。

---

使用 Expo 反应原生

当我做expo start ，这个项目已经开始在 http://localhost:19002/

应用程序.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 客户端应用程序上检查了这个项目。

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

Answer 1

Expo 文档说：

默认情况下，iOS 将阻止任何未使用 SSL 加密的请求。 如果您需要从明文 URL（以 http 开头）中获取，您首先需要添加应用程序传输安全异常。 如果您提前知道需要访问哪些域，则只为这些域添加例外会更安全； 如果直到运行时域才知道，您可以完全禁用 ATS。 但请注意，从 2017 年 1 月起，Apple 的 App Store 审核将需要合理的理由来禁用 ATS。 有关详细信息，请参阅 Apple 的文档。

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