Ionic 2 , error while fetching jsondata from host

Ionic Framework ionic-v3
1

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

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 ts 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);
    })

  }

}
2

Did you try searching the forums? There are many similar topics with detailed information on this subject.

3

ya i got few but it was in ionic 1 , and i am not so familiar with angular 1 , so i dint understand properly .
and i am new to ionic 2 also , so could you please help me out .
thank u

4

Are you requesting the resource from your own hosted server? If so you can modify the HTTP header for the script serving the JSON like so (example taken from PHP ):

header(‘Access-Control-Allow-Origin: *’);

This will allow access from ANY location. This might present a security risk so you could limit to a specific domain instead.

Otherwise this resource might be helpful: http://stackoverflow.com/questions/40576037/cors-with-firebaseionic2angularjs-no-access-control-allow-origin-still-exis

1 Like