开发者问题收集

Ionic http 失败(响应 0)

2020-05-18
2209

我们正在构建一个需要 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 请求

2个回答

我遇到了同样的问题,但我按如下方式进行了排序。请按照以下步骤操作

  1. 打开 [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>
Kevin Jose
2020-05-19

我建议尝试以下方法;

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