ionic 2 , error in getting data from server

Question

i am new to ionic 2 , now i am trying to get the data from host but facing this error . how can i overcome this error . thank you

I am facing this error

XMLHttpRequest cannot load http://example.com/jsondata . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

this is my typescript file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http , Headers} from '@angular/http';
import 'rxjs/add/operator/map'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

export class HomePage {

  url:string;
  data:any[];

  constructor(public navCtrl: NavController , public http : Http) {

    this.getdata();

  }

  getdata(){

    this.url="http://example.com/jsondata";

    this.http.get(this.url).map(res => res.json()).subscribe( res =>{
      console.log(res);
        this.data = res;
    }, err => {
      console.log(err);
    })

  }

}

Answer 1

If you are running ionic serve the problem is that you are trying to access different domain and your browser is blocking it. You can add plugin to chrome browser to stop blocking. I use Allow-Control-Allow-Origin plugin. I hope this helps.