Ionic Angular Capacitor移动的应用程序无法从服务器API获取数据

ao218c7q  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(156)

我有一个Angular Web应用程序,我使用Capacitor将其转换为移动的应用程序。该Web应用程序运行正常,但每当我使用Android Studio模拟器运行该应用程序时,我无法使用代理从托管在localhost:5000上的API服务器获取数据。
每当我试图在模拟器上打开google chrome并输入10.0.2.2:5000时,它就会连接到API服务器并显示数据,但我不想使用10.0.2.2作为本地主机。
我也试过像这样编辑capacitor.config.ts。在这种情况下,它可以工作,但每当我点击转到应用程序的下一页时,它会自动将我重定向到localhost:5000并停止工作。

server: {
    url: 'http://10.0.2.2:4300',
    hostname: '10.0.2.2',
    androidScheme: 'http',
    allowNavigation: [],
  },

下面是返回我需要查看的数据的函数:

this.authentication.getAuthnContexts().subscribe(data => {
  console.log(JSON.stringify(data)); //data is empty when running on android emulator
  this.authMode = data.contexts
});

这是从服务器获取数据的可观察对象:

getAuthnContexts(): Observable<AuthMode>{
    console.log('prova console');
     //I append "http://localhost:5000" in front of the url from proxy.config.test.json
     return this.http.get<AuthMode>('api/authn/contexts').pipe(
     catchError(this.handleError<AuthMode>('getAuthnContexts', new AuthMode ))
   );
 }

我在模拟器上运行应用程序所使用的命令是:

ng build
npx cap copy android
npx cap open android

在AndroidManifest.xml中,我已经添加了下面一行(不确定它是否与问题有关):

android:usesCleartextTraffic="true"
6tqwzwtp

6tqwzwtp1#

localhost是“这个设备”,所以当你从你的计算机上运行时,它能正常工作,因为它和服务器运行在同一台机器上。但是如果你在模拟器或真实的设备上运行,localhost就是设备或模拟器,它们上面没有运行服务器。
您必须使用运行服务器的计算机的本地IP,例如192.168.1.xxx

相关问题