Javascript fetch n'a pas reçu de réponse après les données 'POST' sur le serveur Django

Question

Je construis une application d'interrogation basée sur django et réagis.Quand j'utilise l'API pour envoyer des données POST à ​​mon serveur django, je retourne des informations détaillées afin que je peux faire quelque chose d'autre. J'utilise l'API d'extraction pour gérer toutes les méthodes GET et POST sur mon frontal. C'est ma classe de formulaire.

export default class VoteForm extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = {subjects:[],choosen:"",new:false,message:''}; 
    this.handleSelect = this.handleSelect.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleNewOption = this.handleNewOption.bind(this); 
    } 
    componentWillReceiveProps(props){ 
    this.setState({subjects:props.subjects}); 
    this.setState({choosen:props.subjects[0]}); 
    } 
    handleSelect(event){ 
    if(event.target.value=="customize new option"){ 
     this.setState({new:true}); 
    }else{ 
     this.setState({choosen:event.target.value,new:false}); 
    } 
    } 
    handleNewOption(event){ 
    console.log(event.target.value); 
    this.setState({choosen:event.target.value}); 
    } 
    handleSubmit(){ 
    let json = { 
     pk:this.props.pk, 
     subject:this.state.choosen, 
    }; 
    let csrftoken = Cookies.get('csrftoken'); 
    let header = { 
     "method":'POST', 
     "body" :JSON.stringify(json), 
     "credentials": 'include', 
     "headers":{ 
     "X-CSRFToken": csrftoken, 
     "Accept": "application/json", 
     "Content-Type": "application/json", 
     } 
    }; 

    //This is where it gets wrong.Both alerts didn't work.It only prompted the small window a few times after I quickly clicked the mouse several times.And response wasn't consoled either. 

    fetch('/voteapp/addvoteforsubject/ ',header) 
    .then(function(response){ 
     alert("get response"); 
     return response.json(); 
    }) 
    .then(function(response){ 
     //console.log(response); 
     alert(response.detail); 
    }) 
    .catch(function(error){ 
     console.log(error); 
    }); 


    } 
    render(){ 
    let Options = this.state.subjects.map((opt,index)=>(<option key={index}>{ opt }</option>)); 
    let new_input; 
    let submit; 
    if(this.state.new){ 
     new_input = (<input type="text" className="form-control" placeholder="type new option" onChange={this.handleNewOption}></input>); 
     submit = ( <button className="btn btn-secondary btn-block" onClick={this.handleSubmit}>Submit</button>); 
    }else{ 
     submit = ( <button className="btn btn-secondary btn-block" onClick={this.handleSubmit}>Submit</button>); 
    } 
    return (
     <form> 
     <label>Select</label> 
     <select className="form-control" onChange={this.handleSelect}> 
      <option selected disabled>Choose your option</option> 
      { Options } 
      <option>customize new option</option> 
     </select> 
     { new_input } 
     { submit } 
     </form> 
    ); 
    } 
} 

Ceci est ma fonction de vue django:

@api_view(['GET','POST']) 
def vote_or_not(request): 
    if request.method == 'GET': 
     return Response(data={'message':'Get data'}) 
    if request.method == 'POST': 
     vote = VoteTitle.objects.get(pk=request.data['pk']) 
     if request.user.is_authenticated(): 
      if Votes_ip.objects.filter(vote_title=vote,ip_address=request.META['REMOTE_ADDR']).count()== 0 and Votes.objects.filter(voter=request.user,vote_title=vote).count()==0: 
       a = Votes_ip.objects.create(vote_title=vote,ip_address=request.META['REMOTE_ADDR']) 
       b = Votes.objects.create(voter=request.user,vote_title=vote) 
       subject = vote.subjects.get_or_create(name=request.data['subject'])[0] 
       subject.votes += 1 
       subject.save() 
       print("Not Voted") 
       return Response(data={'detail':'succeed'}) 
     elif Votes_ip.objects.filter(vote_title=vote,ip_address=request.META['REMOTE_ADDR']).count() ==0: 
      a = Votes_ip.objects.create(vote_title=vote,ip_address=request.META['REMOTE_ADDR']) 
      subject = vote.subjects.get_or_create(name=request.data['subject'])[0] 
      subject.votes += 1 
      subject.save() 
      print("Not Voted") 
      return Response(data={'detail':'succeed'}) 
     print("Voted") 
     return Response({'detail':"you have created once"}) 

J'utilise le cadre de repos django pour faire this.The serveur a montré un code d'état HTTP 200 après avoir posté des données à backend.So Je ne vraiment » Je ne sais pas où j'ai eu tort.

Answer 1

Il vous manque quelque chose dans vos en-têtes. Vous devez indiquer explicitement votre demande est AJAX avec 'X-Requested-With': 'XMLHttpRequest'

Sans cela, dans le cadre de la sécurité CORS, une demande « pré-vol » est effectué avant la requête POST réelle, ce qui explique le « http 200 code d'état » vous voyez sur votre serveur. C'est la réponse à cette demande "pré-vol".

Voir Django documentation on ajax Et Stack overflow about x-requested-with header

(sous la direction d'ajouter des descriptions de liens)