调用GET HTTP时android上的ionic3错误

Posted 2023-03-04

【中文标题】调用GET HTTP时android上的ionic3错误

【英文标题】：ionic3 error on android when calling GET HTTP

【发布时间】：2019-04-17 05:26:21

【问题描述】：

在 Ionic3 中，我安装了 import HttpClientModule from '@angular/common/http';，并在我的代码中尝试调用以下 url：

testHTTP()
this.httpClient.get("https://api.upcitemdb.com/prod/trial/lookup?upc=5425016921463").subscribe(
  data => 
    console.log('Data : ', data);
    this.lookup = data["items"][0].title;
  , err => 
    console.log('Error : ', err);
    this.lookup = JSON.stringify(err);
);

但每次失败时：

"headers":"normalizedNames":,"lazyUpdate":null,"headers":,"status":0,"statusText":"Unknown Error","url":null ,"ok":false,"name":"HttpErrorResponse","message":"（未知 url）的 Http 失败响应：0 未知错误","error":"isTrusted":true

当我单击Chrome 上调用 testHTTP 的按钮时，我收到此对象的 CORS 错误（但我可以停用 CORS 并获得真正的响应）。

请问您如何设置 ionic http 以便开始工作？

【问题讨论】：

能分享一下停用CORS后的结果吗？

在 chrome 上，它是我试图调用的 API 返回的 json："code":"OK","total":1,"offset":0,"items":[ "ean":"5425016921463","title":"Concept (français) Concept Neuf","description": ... 所以this.lookup 现在是“Concept (français) Concept Neuf”，它被写在屏幕上

【参考方案1】：

您应该使用 XMLHttpRequest。并且不要忘记标题。

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.upcitemdb.com/prod/trial/lookup?upc=5425016921463", true);

//Really important to set this header
xhr.setRequestHeader("Access-Control-Allow-Origin","http://localhost:8100"); 

xhr.onreadystatechange = function() 
   if(xhr.readyState == xhr.DONE) 
  let ResponseFromRequest = xhr.response //Response from your request   




xhr.send(null);

【讨论】：

在 chrome 上：从源 'localhost:8100' 访问 XMLHttpRequest 在 'api.upcitemdb.com/prod/trial/lookup?upc=5425016921463' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：' Access-Control-Allow-Origin' 标头的值 'upcitemdb.com' 不等于提供的来源。在 android 上：响应为空（alert(ResponseFromRequest) opens empty alert）

是的，这可能是因为您的服务器（本地主机）没有 https 并且不安全

好的，反正问题出在android上，所以没解决。我尝试使用来自cordova http扩展的http并且它可以工作（但它不适用于Windows，因为它仅适用于ios / android）。 XMLHttpRequest 也应该在 android 上工作吗？与 http 扩展有什么区别？谢谢！