Ionic Framework-Veröffentlichung in Django Rest Framework mit HTTP-Anfragen

Question

Ich versuche, einen neuen Benutzer in meiner Ionic App mit Django als Backend zu erstellen. Bis jetzt kann ich mit Postman keinen Benutzer erstellen, aber wenn ich versuche, eine HTTP-Anfrage über meine App zu machen, erhalte ich folgende Fehlermeldung: {"password":["This field is required."],"username":["This field is required."]}. Ich übergebe das Feld username und password an meine Django-App, aber aus irgendeinem Grund registriert es es nicht. Ist meine Post falsch?

DJANGO APP CODE

serializers.py

class UserSerializer(serializers.ModelSerializer): 
    password = serializers.CharField(write_only=True) 
    languages = serializers.ListField(child=serializers.CharField(max_length=30, allow_blank=True), source="userprofile.languages") 

    class Meta: 
     model = User 
     fields = ('first_name', 'last_name', 'email', 'username', 'password', 'languages') 

    def create(self, validated_data, instance=None): 
     profile_data = validated_data.pop('userprofile') 
     user = User.objects.create(**validated_data) 
     user.set_password(validated_data['password']) 
     user.save() 
     UserProfile.objects.update_or_create(user=user, **profile_data) 
     return user 

views.py

@api_view(['POST']) 
@permission_classes((AllowAny,)) 
def create_user(request): 
    serialized = UserSerializer(data=request.data) 
    if serialized.is_valid(): 
     serialized.save() 
     return Response(serialized.data, status=status.HTTP_201_CREATED) 
    else: 
     return Response(serialized._errors, status=status.HTTP_400_BAD_REQUEST) 

IONIC APP CODE

http.ts

register(username, password, email, first_name, last_name, languages) { 
    let url = "https://www.example.com/api/create_user/"; 
    let headers = new Headers() 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 

    return this.http.post(url, 
     {"first_name": first_name, 
     "last_name": last_name, 
     "email": email, 
     "username": username, 
     "password": password, 
     "languages": languages 
     }, {headers: headers}) 
     .map(res => res.json()); 
    } 

register.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

import { HttpProvider } from "../../providers/http/http"; 

@IonicPage() 
@Component({ 
    selector: 'page-register', 
    templateUrl: 'register.html', 
}) 
export class RegisterPage { 

    //basic info 
    username:any; 
    email:any; 
    fname:any; 
    lname:any; 
    password:any; 
    passwordConfirm:any; 
    languages:any = []; 
    cantonese:any; 
    french:any; 
    german:any; 
    italian:any; 
    japanese:any; 
    korean:any; 
    mandarin:any; 
    portuguese:any; 
    russian:any; 
    spanish:any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, private http: HttpProvider) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad RegisterPage'); 
    } 

    register() { 
    if(this.cantonese) { 
     this.languages.push("Cantonese") 
    } 
    if(this.french) { 
     this.languages.push("French") 
    } 
    if(this.german) { 
     this.languages.push("German") 
    } 
    if(this.italian) { 
     this.languages.push("Italian") 
    } 
    if(this.japanese) { 
     this.languages.push("Japanese") 
    } 
    if(this.korean) { 
     this.languages.push("Korean") 
    } 
    if(this.mandarin) { 
     this.languages.push("Mandarin") 
    } 
    if(this.portuguese) { 
     this.languages.push("Portuguese") 
    } 
    if(this.russian) { 
     this.languages.push("Russian") 
    } 
    if(this.spanish) { 
     this.languages.push("Spanish") 
    } 
    alert(this.username+" "+this.password); 
    this.http.register(this.username, 
     this.password, 
     this.email, 
     this.fname, 
     this.lname, 
     this.languages).subscribe((stuff) => { 
     console.log(stuff); 
    }); 
    } 

} 

package.json

{ 
    "name": "project_name", 
    "version": "0.0.1", 
    "author": "Ionic Framework", 
    "homepage": "http://ionicframework.com/", 
    "private": true, 
    "scripts": { 
    "clean": "ionic-app-scripts clean", 
    "build": "ionic-app-scripts build", 
    "lint": "ionic-app-scripts lint", 
    "ionic:build": "ionic-app-scripts build", 
    "ionic:serve": "ionic-app-scripts serve" 
    }, 
    "dependencies": { 
    "@angular/common": "5.0.1", 
    "@angular/compiler": "5.0.1", 
    "@angular/compiler-cli": "5.0.1", 
    "@angular/core": "5.0.1", 
    "@angular/forms": "5.0.1", 
    "@angular/http": "5.0.1", 
    "@angular/platform-browser": "5.0.1", 
    "@angular/platform-browser-dynamic": "5.0.1", 
    "@ionic-native/core": "4.4.0", 
    "@ionic-native/splash-screen": "4.4.0", 
    "@ionic-native/status-bar": "4.4.0", 
    "@ionic/storage": "2.1.3", 
    "ionic-angular": "3.9.2", 
    "ionicons": "3.0.0", 
    "rxjs": "5.5.2", 
    "sw-toolbox": "3.6.0", 
    "zone.js": "0.8.18" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "3.1.2", 
    "typescript": "2.4.2" 
    }, 
    "description": "An Ionic project" 
} 

Answer 1

Sie wollen request.data in Ihrem django Ansicht ändern request.POST

Einzelheiten hier: http://www.django-rest-framework.org/tutorial/2-requests-and-responses/

Insbesondere

request.POST # Only handles form data. Only works for 'POST' method. 
request.data # Handles arbitrary data. Works for 'POST', 'PUT' and 'PATCH' methods.