Ошибка при получении данных из API Django REST

У меня есть мобильное приложение, сделанное с ionic2 и Angularjs2.Ошибка при получении данных из API Django REST

Я бег моего Django на локальном хост, т.е. http://127.0.0.1:8000/stocks/ этого адрес возвращает JSON данных, как показано ниже:

[ 
    { 
     "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 
    } 
]

Я использую поставщик в моем приложении, чтобы получить данные из 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); 
     }); 
    }); 

    } 

}

этого провайдера я использую в моей странице, чтобы получить данные и показать

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


}

и использовать его в моей HTML страницы, как этот

<ion-content padding> 
    <ion-list> 
     <ion-item *ngFor='let stock of recvData'> 
       <p>stock.ticker</p> 
     </ion-item> 
    </ion-list> 
</ion-content>

И я получаю эту ошибку:

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: ответ со статусом: 0 для URL: нулевой

источник

2016-11-03 ritesh_bhat

Ваш интерфейс и бэкэнд работают с различными портами, что делает запрос «Cross Origin». Вы должны разрешить это поведение в django, поскольку оно не разрешено по умолчанию. Посмотрите на «django-cors-middleware» для разрешения запросов Cross-Origin. – r3ign

Возможный дубликат заголовка [«Нет» Access-Control-Allow-Origin] присутствует на запрошенном ресурсе «в django» (http://stackoverflow.com/questions/22476273/no-access-control-allow-origin- header-is-present-on-the-request-resource-i) – r3ign

Спасибо, сэр ... Я просто использовал расширение CORS, чтобы он работал. У меня уже было расширение CORS, но оно было отключено. я использую это расширение https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en –

Необходимо включить CORS в вашем приложении Django.

Вы можете архивировать это, используя django-cors-headers с Django.

После установки пакета добавьте http://localhost:8100 в белый список.

CORS_ORIGIN_WHITELIST = (
    'localhost:8100', 
)

источник

2016-11-03 08:28:05 Sefa

Ошибка при получении данных из API Django REST

ответ

Смежные вопросы