使用 Django CSRF 向 Django 发送 Angular PUT 请求

Question

我正在尝试使用 put 请求更新 django sqlite 数据库的条目。我收到很多“禁止”和“403”错误。我认为这是因为我找不到从 django 附加 CSRF 令牌的方法。

我在这里看到了一些以前的答案，但它们来自更旧版本的 Angular，我不知道如何编辑它们以使用我的代码。 （说把它们放在我找不到的 module.config() 块中）。

组件 HTML：

<button class="btn btn-warning shadow-sm" (click)="update(project)">Update</button>

组件 TS：

update(project: Project) {
    this.projectService.updateProject(project).subscribe();
}

服务 TS：

updateProject(project: Project) {
    var httpudpdate: any = this.http.put('/ph/projects/'+project.id, project)
    return httpudpdate
}

我希望在 django 中更新条目，但我只是收到错误、禁止和 403。

Answer 1

只需将HttpClientXsrfModule 导入您的项目，它将负责读取cookie 并将其作为自定义标头在每个请求中重新发送。

cookie 和标头名称不是标准，而是约定，因此如果默认名称与后端的名称不匹配，您可以配置它们。

碰巧，Django 的 cookie 名称和标头名称与 Angular 默认名称不匹配，因此必须像这样导入 HttpClientXsrfModule withOptions：

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
    ...
    imports:[..., HttpClientXsrfModule.withOptions({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' }), ...]
    ...
})

Answer 2

将HttpClientXsrfModule 导入您的app.module.ts

<!-- app.module.ts -->
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

imports:[...,HttpClientXsrfModule,...]

将HttpXsrfTokenExtractor 注入到您的service 或HttpInterceptor 或您要在其中使用cookie 的文件中。

constructor(private cookieExtractor:HttpXsrfTokenExtractor){}

获取cookie，例如xsrftoken

const xsrf: string = this.cookieExtractor.getToken();