CSRF 失败：React 和 Django 缺少 CSRF 令牌

Question

我正在 GCE VM 上遵循教程 https://testdriven.io/courses/real-time-app-with-django-channels-and-angular/，并且能够与前端和 Django 管理员进行交互和 API。但是，当我尝试从 Angular 前端单击注册 (http POST) 时，我看到了 403 错误。

我认为失败发生在我的 onSumbit() 的订阅部分。触发 onSubmit() 的表单没有来自序列化器的 password2 参数，我不确定这是否是这里的断点。

onSubmit(): void {
    this.authService.signUp(
      this.user.username,
      this.user.firstName,
      this.user.lastName,
      this.user.password,
      this.user.group,
      this.user.photo
    ).subscribe({
      complete: () => this.router.navigateByUrl('/log-in'),
      error: (error) => console.error(error),
    }); 

控制台错误是

HttpErrorResponse {headers: HttpHeaders, status: 403, statusText: 'Forbidden', url: 'http://35.274.59.16:8080/api/sign_up/', ok: false, …}
error: {detail: 'CSRF Failed: CSRF token missing.'}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://35.274.59.16:8080/api/sign_up/: 403 Forbidden"
name: "HttpErrorResponse"
ok: false
status: 403
statusText: "Forbidden"
url: "http://35.274.59.16:8080/api/sign_up/"
[[Prototype]]: HttpResponseBase

我的 Django 序列化器：

from django.contrib.auth import get_user_model
from rest_framework import serializers
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer 
from django.contrib.auth.models import Group
from .models import Trip

class UserSerializer(serializers.ModelSerializer):
    password1 = serializers.CharField(write_only=True)
    password2 = serializers.CharField(write_only=True)
    group = serializers.CharField()

    def validate(self, data):
        if data['password1'] != data['password2']:
            raise serializers.ValidationError('Passwords must match.')
        return data

    def create(self, validated_data):
        group_data = validated_data.pop('group')
        group, _ = Group.objects.get_or_create(name=group_data)
        data = {
            key: value for key, value in validated_data.items()
            if key not in ('password1', 'password2')
        }
        data['password'] = validated_data['password1']
        user = self.Meta.model.objects.create_user(**data)
        user.groups.add(group)
        user.save()
        return user

    class Meta:
        model = get_user_model()
        fields = (
            'id', 'username', 'password1', 'password2',
            'first_name', 'last_name', 'group',
            'photo', # new
        )
        read_only_fields = ('id',)

class LogInSerializer(TokenObtainPairSerializer): # new
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)
        user_data = UserSerializer(user).data
        for key, value in user_data.items():
            if key != 'id':
                token[key] = value
        return token

class TripSerializer(serializers.ModelSerializer):
    class Meta:
        model = Trip
        fields = '__all__'
        read_only_fields = ('id', 'created', 'updated',)

class NestedTripSerializer(serializers.ModelSerializer):
    class Meta:
        model = Trip
        fields = '__all__'
        depth = 1

这是我的 docker-compose.yml。

version: '3'

services:
  taxi-redis:
    container_name: taxi-redis
    image: redis:6.2-alpine

  taxi-database:
    container_name: taxi-database
    environment:
      - POSTGRES_PASSWORD
    image: postgres:14.1
    ports:
      - 5433:5432
    volumes:
      - taxi-database:/var/lib/postgresql/data

  taxi-server:
    build:
      context: ./server
    command: daphne --bind 0.0.0.0 --port 8000 taxi.asgi:application
    # command: python manage.py runserver 0.0.0.0:8000
    container_name: taxi-server
    depends_on:
      - taxi-redis
      - taxi-database
    env_file:
      - ./server/.env
    ports:
      - 8001:8000
    volumes:
      - ./server:/usr/src/app
      - media:/usr/src/app/media # new
      - static:/usr/src/app/static # new

  taxi-client:
    build:
      context: ./client
    command: ng serve --host 0.0.0.0
    container_name: taxi-client
    depends_on:
      - taxi-server
    environment:
      - CHROME_BIN=chromium-browser
    ports:
      - 4201:4200
    volumes:
      - ./client:/usr/src/app

  nginx:
    build:
      context: ./nginx
    container_name: taxi-nginx
    depends_on:
      - taxi-server
      - taxi-client
    ports:
      - 8080:80
    restart: always
    volumes:
      - media:/usr/src/app/media
      - static:/usr/src/app/static
      # - ./server/static:/usr/src/app/static # added this really late.
      - ./server/media:/usr/src/app/media

volumes:
  taxi-database:
  media:
  static:

Answer 1

发现使用具有 SSL 证书的域进行路由令人满意。不确定这是否是最佳解决方案，或者即使这对于 GCP 托管的开发环境是否是必要的。