Django-rest 跨域请求失败

Posted 2023-03-03

【中文标题】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 错误。

我是否缺少任何配置？

【问题讨论】：

你跑过makemigrations和migrate吗？

是的，没有要应用的新迁移

另外，把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 服务器。