python - 由于 CORS 问题，Angular 应用程序无法读取 Django Rest Framework API

Question

我在使用来自 Angular 6 应用程序的 Django Rest Framework REST API 时遇到 CORS 问题。

API 在 http://localhost:55098/admin 上运行.当我用 Insomnia 调用它时它工作正常。 Angular 应用程序在 http://localhost:4200 上运行.

当我第一次输入 http://localhost:4200/cgestores 时它应该重定向到 http://localhost:55098/admin/cgestores ，确实如此，但我收到了一条 CORS 错误消息(见下文)。

我的配置:

REST API:我使用的是 Python 3.7(64 位)、Django (2.1.5) 和 Django Rest Framework (3.9.1)

我的设置.py:

ALLOWED_HOSTS = [
    'testserver',
    'localhost'
    ]

CORS_ORIGIN_ALLOW_ALL = True

INSTALLED_APPS = [
    # Add your apps here to enable them
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'rest_framework_swagger',
    'corsheaders',
    'admin_v20',
]

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

Angular 客户端:我使用的是 Angular 6.4.1。服务(apiusuarios.service.ts):

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ApiusuariosService {

  datos: iCentroGestor;

  constructor(private http: HttpClient) { }

  getMock(): any{
    return [
      {"gececo":"a", "gecdes":"one"},
      {"gececo":"b", "gecdes":"two"},
      {"gececo":"c", "gecdes":"three"}
    ];
  }

  getUsers(): Observable<any> {
    return this.http.get(endpoint + 'cgestores').pipe(map(this.extractData));
  }

}

export interface iCentroGestor {
  gececo: string;
  gecdes: string;
}

const endpoint = 'http://localhost:55098/admin/';

方法 getMock() 返回一个固定的 JSON 值，仅用于测试目的，它工作正常。真正调用API的方法是getUsers()，是触发CORS错误的方法:

在“http://localhost:55098/admin/cgestores/”访问 XMLHttpRequest '来自原产地' http://localhost:4200 ' 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。

(这是 Chrome；Firefox 和 Edge 返回类似的响应)

这似乎是很多人的问题，我查看了这些文章:

• https://github.com/crs4/ome_seadragon/wiki/Enable-Django-CORS-(Cross-Origin-Resource-Sharing)-Headers-configuration
• https://www.techiediaries.com/django-cors/
• CORS django 'Access-Control-Allow-Origin'
• No 'Access-Control-Allow-Origin' using django rest framework api
• Django Python rest framework, No 'Access-Control-Allow-Origin' header is present on the requested resource in chrome, works in firefox
• Django Rest Framework: XMLHttpRequest cannot load http://127.0.0.1:8000/xyz/api/abc

...还有一些，还有这个视频:

• https://www.youtube.com/watch?v=OIbndrrUYiY

...他们几乎都说了同样的话:这不是 Angular 问题，这是服务器问题，我应该对我的 DRF 项目进行以下修改:

1. 安装 CORS header 包

2. 使用以下内容修改 settings.py:

   • 添加 CORS_ORIGIN_WHITELIST
   • 将 corsheaders 添加到 INSTALLED_APPS
   • 将 corsheaders.middleware.CorsMiddleware 添加到 MIDLEWARE_CLASSES

都搞定了，还是不行。在尝试了所有这些之后，我了解到我可以在我的响应中指定我需要的 header 。所以我在我的 DRF 项目中尝试了这个:

return Response(data=pDatos, status=pStatus, headers={"Access-Control-Allow-Origin":"*"})

... 宾果游戏成功了!

但是，这并不是真正的解决方案，我不喜欢在特定响应上依赖特定参数。而且，最重要的是，我没有办法限制谁可以访问该网站，谁不能，使用 CORS_ORIGIN_WHITELIST 可以很容易地做到这一点(好吧，我可以，但是写一个带有网站列表的参数星号似乎不是正确的选择)。

那么，我做错了什么？为什么我的 settings.py 选项不起作用？我将它们注释掉，只留下 return Response... 它仍然有效，所以 settings.py 并没有真正做任何事情。

抱歉，这篇文章很长。有任何想法吗？预先感谢您的帮助。

Answer 1

首先使用 pip 安装 django-cors-headers

pip install django-cors-headers

您需要将它添加到您的项目 settings.py 文件中:

INSTALLED_APPS = (
    ##...
    'corsheaders'
)

接下来需要在settings.py中的中间件类中添加corsheaders.middleware.CorsMiddleware中间件

MIDDLEWARE = (
    'corsheaders.middleware.CorsMiddleware',
    #...
)

然后，您可以通过添加以下设置为所有域启用 CORS

CORS_ORIGIN_ALLOW_ALL = True

或者只为指定域启用 CORS:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000', # Allowed host, if CORS_ORIGIN_ALLOW_ALL is False
)