Ionic 和 Django：不存在 'Access-Control-Allow-Origin' header

Question

我正在使用 Ionic 构建我的第一个应用程序，并且我正在使用 Django Rest Framework API。

我只想在 Ionic 中创建一个显示类别列表的简单页面。

我已经为 API 创建了模型类别和视图集。当我转到 Django-rest-framwork 查看器 (http://localhost:3010/category/) 时一切正常。

但是当我尝试获取结果（使用 Ionic）时出现此错误：

XMLHttpRequest cannot load http://localhost:3010/category/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

我的代码：

import {Page, Platform, NavController} from 'ionic/ionic';
import {EmployeeDetailsPage} from '../employee-details/employee-details';
import {Http} from 'angular2/http';

@Page({
  templateUrl: 'build/pages/getting-started/getting-started.html'
})
export class GettingStartedPage {
  constructor(platform: Platform, nav: NavController, http: Http) {
    this.platform = platform;
    this.nav = nav;
    this.http = http;

    this.http.get("http://localhost:3010/category/")
        .subscribe(data =>{
          this.items=JSON.parse(data._body).results;//Bind data to items object  
        },error=>{
            console.log(error);// Error getting the data
        } );

  }

}

Answer 1

您可能需要安装 CORS。

如果您在 chrome 上进行测试，您可能还需要允许跨源（有一个扩展），这应该可以解决 CORS 问题。

Answer 2

您需要将 CORS headers 发送到 Ionic Framework 以使 cross-domain ajax 工作，因为您的 ionic 应用托管在端口 8100 上，并且 django-server 是运行在端口 3010 上，这被视为 cross-domain 请求。

对于 django，通过 pip 安装 CORS headers 应用程序。

在您的设置中，启用 'corsheaders' 应用程序，并添加允许的网址。

# this disables Cross domain requests
CORS_ORIGIN_ALLOW_ALL = False 

# this allows cookie being passed cross domain    
CORS_ALLOW_CREDENTIALS = True 

# this is the list of allowed origins for cross domain ajax
CORS_ORIGIN_WHITELIST = ( 
        'localhost:8100',

)

Ionic 和 Django：不存在 'Access-Control-Allow-Origin' header

Ionic and Django: No 'Access-Control-Allow-Origin' header is present

api

django

django-rest-framework

ionic-framework

ionic2