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

Question

我正在尝试使用放置请求更新 django sqlite 数据库中的条目。我收到很多 'forbidden' 和“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();
}

服务技术人员：

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

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

Answer 1

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

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

碰巧，Django 的 cookie 名称和 header 名称与 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();

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

Send Angular PUT request to Django using Django CSRF

django

put

csrf

angular