我正在 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:
发现使用具有 SSL 证书的域进行路由令人满意。不确定这是否是最佳解决方案,或者即使这对于 GCP 托管的开发环境是否是必要的。