如何让 cors 与 angular（apollo 客户端）和 django/graphene 一起正常工作

Question

我正在尝试使用 python-graphene 和 django 构建一个应用程序以在数据库端保存数据并在客户端使用 angular。

我已经开发了双方并且他们独立工作得很好，angular 使用 in-memory-web-api 和石墨烯使用 insomnia （[=87 的 postman 样式应用程序=]).

为了整合它们，我正在尝试使用 apollo-angular。但是，请求返回 404。

我是网络开发的新手，所以我可能遗漏了一些微不足道的东西。

在线搜索我发现因为服务器 http://localhost:8000 上运行并且应用程序 http://localhost:4200 上运行，所以我需要 CORS 在服务器端设置。

我已按照 manual 上的说明进行操作：

通过 pip install django-cors-headers 安装 corsheaders。
将 corsheaders 添加到 INSTALLED_APPS。
在 MIDDLEWARE 处添加 corsheaders.middleware.CorsMiddleware。

但错误仍然存在。

那是我遇到的时候，答案似乎是相关的。所以我：

在服务器上将 CORS_ORIGIN_ALLOW_ALL = True 和 CORS_ALLOW_CREDENTIALS = True 添加到 settings.py。
已从 MIDDLEWERE 中删除 django.middleware.clickjacking.XFrameOptionsMiddleware。
在客户端的请求中添加了 withCredentials header。
清理浏览器兑现数据和cookies。

但错误仍然存在。

这是我的组件，其中包含查询：

import { Component, OnInit } from '@angular/core';
import { Patient } from '../patient';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';

const GET_PATIENTS = gql`
query all_patients {
    patients{
        id
        name
        age
    }
}
`;

export interface GetPatientsResponse {
    patients: Patient[];
    loading: boolean;
}

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    patients: Patient[] = [];
    loading = true;

    constructor(private apollo: Apollo) { }

    ngOnInit() {
        this.apollo.watchQuery<GetPatientsResponse>({
            query: GET_PATIENTS
        }).valueChanges.subscribe((response) => {
            this.patients = response.data.patients;
            this.loading = response.data.loading;
        });
    }
}

此外，我已将这些添加到 graphql.module.ts:

const uri = 'http://localhost:8000/graphql/';

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri: 'http://localhost:8000/graphql/', withCredentials: true}),
    cache: new InMemoryCache(),
  };
}

我希望从服务器收到 json 以及我的查询结果，但得到的却是 404: http://localhost:8000/graphql/ Not Found。

我错过了什么？

Answer 1

找了半天看了this answer才知道哪里错了。

我同时使用 angular-in-memory-web-api 并试图将请求发送到我自己的服务器，这导致了错误。

通过从我的 app.module.ts 中删除 angular-in-memory-web-api，一切都按预期进行。

如何让 cors 与 angular（apollo 客户端）和 django/graphene 一起正常工作

How to get cors to work properly with angular (apollo client ) and django/graphene

python

django

graphene-python

apollo-client

angular