testdriven.io: Developing a Real-Time Taxi App with Django Channels and Angular: unable to sign-up from front end on gcp

Question

I am following the tutorial https://testdriven.io/courses/real-time-app-with-django-channels-and-angular/ on a GCE VM and am able to interact with the front end and Django admin and APIs. However, when I try to click the sign-up (http POST) from the Angular front end I am seeing a 403 error.

I think the failure is happening in the subscribe part of my onSumbit(). The form that triggers onSubmit() does not have the password2 parameter from the serializer and I am not sure if that is the breaking point here.

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),
    }); 

The console errors is

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

My Django serializer:

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

Here is my 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

Found it satisfactory to route using a domain with a SSL certificate. Not sure if that is the optimal solution or even if that is necessary for a dev environment hosted of GCP.