Ionic 5 应用未在 android 上从 REST API 获取数据

Question

我构建了一个离子应用程序，它利用 Vue、Capacitor 和部署在 heroku 上的 Strapi 后端。我正在使用 fetch() api 进行 api 调用。

该应用程序在浏览器中正常运行，但当符合 android 并安装在我的设备上时 (Android 9) 我在我使用的主页上显示 SyntaxError: Unexpected token < in JSON at position 0 Vue 的 <Suspense> 组件显示错误信息。

所有其他页面都是空白的，我无法执行 POST 个请求。

这是我的第一个离子和移动应用程序，所以我不确定如何调试这个问题。

Answer 1

我建议您使用 capacitor http plugin 从移动设备拨打 API 电话：https://github.com/capacitor-community/http 您也可以使用此插件避免 CORS 问题。

文档中缺少Android的配置，按如下方式添加。

1- 在android\app\src\main\java\MainActivity.java

中导入并添加http插件

package com.myapp.com;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
import com.getcapacitor.plugin.http.Http; //added

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Http.class); //added
    }});
  }
}

2- 在 Android Studio 中同步 gradle 文件：

File --> Sync Project with Gradle Files

在package.json中，依赖项应该如下所示：

"@capacitor-community/http": "^1.0.0",
"@capacitor/android": "^3.0.0",
"@capacitor/core": "^3.0.0",

Ionic 5 应用未在 android 上从 REST API 获取数据

Ionic 5 app not getting data from REST API on android

android

ionic-framework

vue.js

capacitor