Ionic Angular HTTP isTrusted:true 问题答案

【问题标题】：Ionic Angular HTTP isTrusted:true issueIonic Angular HTTP isTrusted:true 问题
【发布时间】：2020-11-11 02:36:20
【问题描述】：

我已经好几天试图让它工作了，我在这里和谷歌上就这个问题进行了很多搜索，但到目前为止没有任何效果。

我正在使用 Ionic Angular（最新版本）开发一个基本应用程序，因为我正试图摆脱 Ionic 1 和 AngularJS，并且需要熟悉新框架。

我想使用 Angular 的 HTTP 而不是 Ionic Native HTTP（它似乎在浏览器中不起作用，我更喜欢 Angular 的版本）对我自己的 API 进行简单的 GET 请求。

目前我只在 iOS 上进行开发和测试，90% 的时间我尝试执行请求时，我在 iOS 模拟器和真实设备上也收到以下错误：

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https://api.myserver.com/endpoint1/","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://api.myserver.com/endpoint1/: 0 Unknown Error","error":{"isTrusted":true}}

我控制 API，所以我已经设置了适当的 CORS 标头（即使在 Ionic 1 中也已经使用了很长时间），如果我不断重试调用，它最终会成功通过，我从我的服务器得到我的 JSON 响应，所以这让我觉得这是 Ionic/Angular 方面的东西，而不是 API。

由于这是一个测试应用程序，我目前除了 GET 参数令牌之外没有使用任何真正的身份验证。下面是我的代码。

api.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  baseUrl = 'https://api.myserver.com/';
  token = 'mytoken';

  constructor(private http: HttpClient) { }

  myGETCall(): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json"
      }),
      params: {token: this.token}
    };
    return this.http.get(`${this.baseUrl}endpoint1/`, httpOptions);
  }
}

servers.page.ts：

import { ApiService } from './../../../services/api.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.page.html',
  styleUrls: ['./servers.page.scss'],
})
export class ServersPage implements OnInit {
  payload;
  loading;

  constructor(private apiService: ApiService) { }

  ngOnInit() { }

  ionViewWillEnter() {
    this.loading = true;
    // allow skeleton html (ion-skeleton-text) to show for a bit before actually calling and displaying data
    setTimeout(() => {
      this.apiService.listServers().subscribe(
        response=>{
          this.payload = response.data;
          this.loading = false;
        },
        error => { console.log(error) }) // logs isTrusted:true
    }, 1000);
  }
}

config.xml：

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

index.html:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

是否有人对可能导致此问题的原因有任何意见？在浏览器中运行良好。

非常感谢

【问题讨论】：

标签： angular http ionic-framework

【解决方案1】：

终于终于我找到了导致问题的原因！

我的 API 服务器位于与负载均衡器绑定的 Amazon AWS EC2 实例上。我所要做的就是在负载均衡器属性中禁用 HTTP/2，现在一切都按预期工作了！

希望这对也遇到此问题的人有所帮助。

【讨论】：