Test web api works on Ionic lab and emulator but not in device

Ionic Framework
1

Hello, I have just 2 weeks in ionic programming!
I developped a webapi (ASP.Net) and publish it on a web hosting server with the mssql data base.
my ionic app will connect to the webapi by an URL provided from the host server (SmarterASP).

when I tested login it works well on ionic lab and emulater but not on my device,

ionic cordova run android --device --consolelogs --verboseg

I get this error in my home page after click on the button Sign up
image

this is my share.ts

import {Injectable} from '@angular/core';
import {Http, Headers,RequestOptions, RequestMethod} from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class ShareService{
    constructor(private http:Http){

    }
    login(login,pass){
        var _url="http://hostnamesite.com/api/APILogin";
        var _body={"loginUser":login,"passwordUser":pass};
        var _header=new Headers({'Content-Type':'Application/json','Access-Control-Allow-Origin':'*'});
        var _option=new RequestOptions({method:RequestMethod.Post,headers:_header});
        return this.http.post(_url,_body,_option).map(res=>res.json());
    }
}

this is my home.ts

import { Component,ErrorHandler } from '@angular/core';
import {NavController} from '@ionic/angular';
import {ShareService} from '../share/share';
import {ToastController}from '@ionic/angular';
import { LoadingController } from '@ionic/angular';
import {Router} from '@angular/router'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})


export class HomePage {
  loginUser:string;
  passwordUser:string;
  constructor(public navCtrl:NavController,public share:ShareService,public toastCtrl:ToastController,private router: Router,public loadingController: LoadingController) {}

async signin(){
  const loading = await this.loadingController.create({
  
    message: 'Please wait...',
    duration: 5000
  });
  await loading.present();
this.share.login(this.loginUser,this.passwordUser).subscribe(async data=>{
  if(data==null){
    const toast=await this.toastCtrl.create({
      message:'Login Failed',
      duration:3000,
      
    });
    toast.present();
  }else{
    this.router.navigateByUrl('/dashbord');
  }
  loading.dismiss();
 
},async err => {
 console.log(err);
  const toast=await this.toastCtrl.create({
    message:'Connexion Error: Check internet connexion please! More details:<br/>'+err,
    duration:3000,
    color: 'danger',
    
  });
  toast.present();
  loading.dismiss();

});
}}

Blockquote
ionic info

Ionic:

Ionic CLI : 6.6.0 (C:\Users\admin\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 9.1.5
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

cordova-res : 0.13.0
native-run : 1.0.0

System:

NodeJS : v12.16.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 8.1

2

This is most likely CORS. Enable CORS in your WebApi service, then it should be fine. Look on stack overflow.

3

Thank you @Daveshirman for your reply but it’s already enabled in my webapi, any suggestions please?

  config.EnableCors(new EnableCorsAttribute(origins: "*", headers: "*", methods: "*"));
4

Then it’s http being blocked. You need to use Https on devices for your calls.

5

Sorry but I get the same error using HTTPS … is there any way to get more details for http error that I can add to my code?
Thank you again

6

The solution was to add

https://cors-anywhere.herokuapp.com/
before the url of the hostsitename.
so will be like this:

 var _url="https://cors-anywhere.herokuapp.com/http://hostnamesite.com/api/APILogin";

I get the solution from this link:
https://forum.ionicframework.com/t/ionic3-http-call-android-9-0-4/160872