从Django REST API接收数据时出错

Question

我有一个用ionic2和Angularjs2制作的移动应用程序。在

我正在本地主机上运行我的Django，即http://127.0.0.1:8000/stocks/ 此url返回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获取数据

^{pr2}$

我在我的页面中使用这个提供者来接收数据并显示

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:43460异常：URL为null的状态为0的响应

Answer 1

您需要在Django应用程序上启用CORS。在

您可以使用django-cors-headers与Django一起归档。在

安装包后，将http://localhost:8100添加到白名单中。在

CORS_ORIGIN_WHITELIST = (
    'localhost:8100',
)