Django-rest 跨域请求失败

Posted

技术标签:

【中文标题】Django-rest 跨域请求失败【英文标题】:Django-rest cross origin request fails 【发布时间】:2017-12-27 05:27:02 【问题描述】:

我已经安装了django-cors-headers 并且我的seetings.py 有以下内容:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'rest_framework_docs',
    'tasks'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

但是,当我从 Angular 前端点击 url 时,我仍然收到 Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response 错误。

我是否缺少任何配置?

【问题讨论】:

你跑过makemigrationsmigrate吗? 是的,没有要应用的新迁移 另外,把ALLOWED_HOSTS = ['*']放到你的settings.py中。 它也没有帮助:( 你能显示你的post请求数据或你的请求的一些代码吗? 【参考方案1】:

问题不在后端,我的 Angular 服务中有一个功能如下:

  getTasks(): Observable<Task[]> 

    let headers = new Headers( 'Access-Control-Allow-Origin': '*' );
    let options = new RequestOptions( headers: headers );

    return this.http.get(this.taskUrl, options)
    .map(this.extractData)
    .catch(this.handleError);
  

必须是:

  getTasks(): Observable<Task[]> 

    return this.http.get(this.taskUrl)
    .map(this.extractData)
    .catch(this.handleError);
  

【讨论】:

【参考方案2】:

你需要添加:

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False

你的 settings.py 也可以,它会工作;)

【讨论】:

【参考方案3】:

在我的情况下,当后端(django)和前端(角度)在同一台主机上工作时它工作。就像 localhost:8000 上的 django 服务器和 localhost:4200 上的 angular 服务器。

【讨论】:

以上是关于Django-rest 跨域请求失败的主要内容,如果未能解决你的问题,请参考以下文章

Ajax跨域请求设置标头失败

layui跨域问题

跨域 POST 请求的 CSRF 验证在生产中失败

为啥有些跨域 JSON 请求会失败,而有些则不会?

如何修复 Firefox 中的跨域请求失败

Angular 跨域请求在 Chrome 上有效,在 Firefox 和 IE 上失败