CODEWITHSUNDEEP
androidnode.jsangularapiionic-framework
Khuur
Khuur

Reputation: 13

Ionic http fail(response 0)

We are building an app which requires an API request. On front end we are using Ionic with Angular. When we tried to send a request to backend we get this error.

It works when we are trying on desktop in browser.

{
    "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
    }
}

This is how we send a request.

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']);
      }
    );
  }

We are using NodeJS v10.15.3 where we set CORS header presented below.

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'">

We have also tried: - other API (https://coinmarketcap.com/api) - POST and GET requests

Upvotes: 1

Views: 2328

Answers (2)

Peyi Oyelo
Peyi Oyelo

Reputation: 140

Some things I would suggest trying;

  1. Download a CORS plugin that can allow you to bypass blocked headers
  2. If you're using ionic I am assuming that this if for a hybrid app. Make use of ionic HTTP. You could get better results.
  3. Check out Ionic's official docs for some help https://ionicframework.com/docs/troubleshooting/cors

Upvotes: 1

Kevin Jose
Kevin Jose

Reputation: 876

I faced the same issue, but i sorted it as below. Follow these steps

  1. Open [yourProject]/android/app/src/main/AndroidManifest.xml

2.Add this line there android:usesCleartextTraffic="true"

3.Add this line to config.xml file

<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>

Upvotes: 2

Related Questions