django rest framework: getting two post request in the back end - django

Question

I have an Angular app posting registration message to my django back-end, however, when I click on register button on the page, I got tow post request in the django logging, like this
[17/Apr/2018 22:13:47] "OPTIONS /user/register HTTP/1.1" 200 0
[17/Apr/2018 22:13:47] "POST /user/register HTTP/1.1" 500 27
[17/Apr/2018 22:13:47] "POST /user/register HTTP/1.1" 201 91
Chrome dev tool - Network
It is just annoying when testing locally, but when I deploy this on a ubuntu server(with uwsgi and nginx), the back-end seems to crash. I am not sure if this is the problem, I am just checking every possibility that I can think of.
BTW: I am using sqlite, it is because of the transaction?
Angular registration.component.js
import { Component, OnInit, AfterViewInit, ViewChild } from '#angular/core';
import { NgForm } from "#angular/forms";
import { HttpClient } from "#angular/common/http";
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit, AfterViewInit {
formData = {} as any;
isHide: boolean;
constructor(
private http: HttpClient,
) {
this.isHide = true;
}
formErrors = {
'email': '',
'userName': '',
'password1': '',
'password2': '',
'phone': ''
};
validationMessages = {
'email': {
'required': '邮箱必须填写.',
'pattern': '邮箱格式不对',
},
'userName': {
'required': '用户名必填.',
'minlength': '用户名太短',
},
'password1': {
'required': '请输入密码',
'minlength': '密码太短',
},
'password2': {
'required': '请重复输入密码',
'minlength': '密码太短',
},
'phone': {
'required': '手机号必须填写.',
'pattern': '手机号格式不对',
},
};
#ViewChild('registerForm') registerForm: NgForm;
ngAfterViewInit(): void {
this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data) {
if (this.formErrors) {
for (const field in this.formErrors) {
this.formErrors[field] = '';
const control = this.registerForm.form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
if (control.errors) {
for (const key in control.errors) {
this.formErrors[field] += messages[key] + '';
}
}
}
}
}
}
doJumpIndex() {
console.log("zhuye");
}
doJumpLogin() {
console.log("login");
}
doSubmit(obj: any) {
if (!this.registerForm.valid) {
this.onValueChanged(obj);
return;
}
let url = 'http://localhost:8000/user/register';
this.http.post(url, obj).subscribe(
data => {
console.log(data);
if (true) {
this.isHide = false;
}
},
err => {
console.log(err);
});
}
ngOnInit() {
}
}
The following code was adopted from https://github.com/iboto/django-rest-framework-user-registration
my UserRegistrationAPIView
class UserRegistrationAPIView(generics.CreateAPIView):
permission_classes = (permissions.AllowAny,)
serializer_class = serializers.UserRegistrationSerializer
queryset = User.objects.all()
UserRegistrationSerializer
class UserRegistrationSerializer(serializers.ModelSerializer):
email = serializers.EmailField(
required=True,
label="Email Address"
)
password1 = serializers.CharField(
required=True,
label="Password",
style={'input_type': 'password'}
)
password2 = serializers.CharField(
required=True,
label="Confirm Password",
style={'input_type': 'password'}
)
invite_code = serializers.CharField(
required=False
)
class Meta(object):
model = User
fields = ['username', 'email', 'password1', 'password2', 'invite_code']
def validate_email(self, value):
if User.objects.filter(email=value).exists():
raise serializers.ValidationError("Email already exists.")
return value
def validate_username(self, value):
if User.objects.filter(username=value).exists():
raise serializers.ValidationError("Username already exists.")
return value
def validate_invite_code(self, value):
data = self.get_initial()
email = data.get('email')
if value:
self.invitation = TeamInvitation.objects.validate_code(email, value)
if not self.invitation:
raise serializers.ValidationError("Invite code is not valid / expired.")
self.team = self.invitation.invited_by.team.last()
return value
def create(self, validated_data):
team = getattr(self, 'team', None)
user_data = {
'username': validated_data.get('username'),
'email': validated_data.get('email'),
'password': validated_data.get('password1')
}
is_active = True if team else False
user = UserProfile.objects.create_user_profile(
data=user_data,
is_active=is_active,
site=get_current_site(self.context['request']),
send_email=True
)
if team:
team.members.add(user)
if hasattr(self, 'invitation'):
TeamInvitation.objects.accept_invitation(self.invitation)
TeamInvitation.objects.decline_pending_invitations(email_ids=[validated_data.get('email')])
return validated_data
urls.py
urlpatterns = [
path('login', views.UserLoginAPIView.as_view(), name='login'),
path('register', views.UserRegistrationAPIView.as_view(), name='register'),
path('profile', views.UserProfileAPIView.as_view(), name='user_profile'),
path('password_reset', views.PasswordResetAPIView.as_view(), name='password_change'),
re_path(r'^verify/(?P<verification_key>.+)/$',
views.UserEmailVerificationAPIView.as_view(),
name='email_verify'),
re_path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
views.PasswordResetConfirmView.as_view(),
name='password_reset_confirm'),
]

Answer 1

It looks to me like your doSubmit angular function might be firing twice. From the logs, it looks like it's sending a request with incorrect information (the first call is 27 bytes long, the second (correct one) is 91 bytes). This first request is getting a HTTP 500 error (Server side error). i.e. it's causing a bug in the server.
On your local testing server a 500 error won't crash the server as it will just log the error and reload (because that's what testing servers do) but on your proper server it is crashing.
I'd say take a look at the doSubmit function and make sure it's not letting any incorrect values past the first if (!this.registerForm.valid) first (sometimes I find when Angular is first creating the objects functions fire that I wouldn't have expected to, for example). And secondly, I'd add some logging to figure out what part of UserRegistrationAPIView is failing (because that's the first function Django calls and somewhere along the way an uncaught exception is being thrown).
If you check the main servers logs they might tell you why the 500 internal server error is being thrown. (Saved in /var/log/apache2/error.log by default if you're running an apache server).