Eroor in receiving data from the Django REST API


i am running my django on localhost i.e this url returns JSON Data as shown below:

        "id": 1,
        "ticker": "FB",
        "open": 7.0,
        "close": 10.0,
        "volume": 500
        "id": 2,
        "ticker": "AMZN",
        "open": 125.05,
        "close": 200.98,
        "volume": 800
        "id": 3,
        "ticker": "MSFT",
        "open": 1.25,
        "close": 87.0,
        "volume": 7000

i am using a provider in my app to get the data from the url

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

export class GetData {

  public data:any;
  constructor(public http: Http) {
    console.log('Hello GetData Provider');

    if ( {
      return Promise.resolve(;

    return new Promise(resolve => {
      .map(res => res.json())
      .subscribe(data => { = data;



this provider i am using in my page to receive the data and show

import { Component } from '@angular/core';
import {GetData} from '../../providers/get-data';

import { NavController } from 'ionic-angular';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  public recvData:any;
  constructor(public navCtrl: NavController, public getData: GetData) {
    .then(data => {
      this.recvData = data;

    console.log("the received data is >> ",this.recvData);


and using it in my html page like this

<ion-content padding>
        <ion-item *ngFor='let stock of recvData'>

and i am getting this error:
XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

main.js:43460EXCEPTION: Response with status: 0 for URL: null

please help…thanks in advance


Thanks for the detailed question, though this has nothing to do with Ionic 2 or your perfectly valid code, it would work well if you would run it on a device and not your browser.

The problem is CORS (Cross Origin Resource Sharing); your browser does not allow requests across different URLs. http://localhost:8100 and http://localhost:8000 is a big difference, so by default requests are not allowed.

You need to setup your API to send the ‘Access-Control-Allow-Origin’ header, as the error message states. Check this, I have no knowledge of Django but that looks promising.

Secondly, I have this Chrome Extension installed to tell the browser to allow CORS.


Now this is legendary…Thanks sir :smile:
Made my day
i already had the CORS extension but it was disabled. :grin: