Eroor in receiving data from the Django REST API

Ionic Framework ionic-v3
1

i am running my django on localhost i.e http://127.0.0.1:8000/stocks/ 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';


@Injectable()
export class GetData {


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

  load(){
    if (this.data) {
      return Promise.resolve(this.data);
    }



    return new Promise(resolve => {
      this.http.get('http://127.0.0.1:8000/stocks/')
      .map(res => res.json())
      .subscribe(data => {
        this.data = data;
        resolve(this.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';

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

  public recvData:any;
  constructor(public navCtrl: NavController, public getData: GetData) {
    this.loadPeople();
  }
  loadPeople(){
    this.getData.load()
    .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-list>
        <ion-item *ngFor='let stock of recvData'>
                <p>stock.ticker</p>
        </ion-item>
  </ion-list>
</ion-content>

and i am getting this error:
XMLHttpRequest cannot load http://127.0.0.1:8000/stocks/. 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

2

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.

2 Likes
3

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