离子 http 失败（响应 0）答案

【问题标题】：Ionic http fail(response 0)离子 http 失败（响应 0）
【发布时间】：2020-09-04 02:27:24
【问题描述】：

我们正在构建一个需要 API 请求的应用。在前端，我们使用 Ionic 和 Angular。当我们尝试向后端发送请求时，我们会收到此错误。

当我们在浏览器中尝试桌面时，它可以工作。

{
    "headers":{
        "normalizedNames":{

        },
        "lazyUpdate":null,
        "headers":{

        }
    },
    "status":0,
    "statusText":"Unknown Error",
    "url":"http://server_ip:3000/path/useCode/1234",
    "ok":false,
    "name":"HttpErrorResponse",
    "message":"Http failure response for http://server_ip:3000/path/useCode/1234: 0 Unknown Error",
    "error":{
        "isTrusted":true
    }
}

这就是我们发送请求的方式。

import { HttpClient, HttpHeaders } from '@angular/common/http';

public sendCodeGET() {
    this.httpClient.get(`http://server_ip:3000/path/useCode/${this.code.trim()}`).subscribe(
      res => {
        this.response = JSON.stringify(res);
      },
      err => {
        this.response = JSON.stringify(err);
        this.presentToast(err.error['message']);
      }
    );
  }

我们使用的是 NodeJS v10.15.3，我们设置了如下所示的 CORS 标头。

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept, Authorization");
    res.setHeader("Access-Control-Allow-Methods","GET, POST, OPTIONS, DELETE");
    res.setHeader("Access-Control-Expose-Headers","Content-Length,Content-Range");

    if (req.method === 'OPTIONS') {
        res.setHeader('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
        return res.status(200).json({});
    }
    next();
});

config.cml

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

index.html

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

我们也尝试过： - 其他 API (https://coinmarketcap.com/api) - POST 和 GET 请求

【问题讨论】：

在 AndroidManifest.xml 中检查您的权限。 <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

标签： android node.js angular api ionic-framework

【解决方案1】：

我建议尝试一些事情；

下载一个 CORS 插件，可以让您绕过被阻止的标头
如果您使用的是 ionic，我假设这适用于混合应用程序。使用离子 HTTP。您可以获得更好的结果。
查看 Ionic 的官方文档以获取帮助 https://ionicframework.com/docs/troubleshooting/cors

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我将其排序如下。请按照以下步骤操作

打开[yourProject]/android/app/src/main/AndroidManifest.xml

2.在此处添加此行android:usesCleartextTraffic="true"

3.将此行添加到config.xml文件中

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:usesCleartextTraffic="true" />
</edit-config>

【讨论】：