首页 > 解决方案 > 如何使用 Expo 连接到您的 React Native 中的 API?

问题描述

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 Client App 上检查了这个项目。

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

标签: apireact-nativelaravel-5localhost

解决方案


世博会文档说:

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

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


推荐阅读