【Django入門】Django REST framework+　Vue　CLIでPOSTでデータ送ってみる

fetch("https://localhost-人によって違う.paiza-user-free.cloud:8000/api/article/", {
  "headers": {
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    "accept-language": "ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7",
    "cache-control": "max-age=0",
    "content-type": "multipart/form-data; boundary=----WebKitFormBoundaryhmNZdkxLmKvWiSzQ",
    "sec-ch-ua": "\"Chromium\";v=\"104\", \" Not A;Brand\";v=\"99\", \"Microsoft Edge\";v=\"104\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Windows\"",
    "sec-fetch-dest": "document",
    "sec-fetch-mode": "navigate",
    "sec-fetch-site": "same-origin",
    "sec-fetch-user": "?1",
    "upgrade-insecure-requests": "1"
  },
  "referrer": "https://localhost-人によって違う.paiza-user-free.cloud:8000/api/article/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "------WebKitFormBoundaryhmNZdkxLmKvWiSzQ\r\nContent-Disposition: form-data; name=\"csrfmiddlewaretoken\"\r\n\r\nnDz07Ce略GRXXyfcYS\r\n------WebKitFormBoundaryhmNZdkxLmKvWiSzQ\r\nContent-Disposition: form-data; name=\"article_heading\"\r\n\r\nテスト\r\n------WebKitFormBoundaryhmNZdkxLmKvWiSzQ\r\nContent-Disposition: form-data; name=\"article_body\"\r\n\r\n投稿してみる\r\n------WebKitFormBoundaryhmNZdkxLmKvWiSzQ--\r\n",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

さっきのDjango　RestframeworkのAPI画面の最初のほうの通信のGETを検証ツールで見てみます。具体的には該当する名前をクリックして回答のタブをクリックすると以下のように送られてきたソースが見れます。

一部のみ 
<form action="/api/article/" method="POST" enctype="multipart/form-data" class="form-horizontal" novalidate>
                            <fieldset>
                              <input type="hidden" name="csrfmiddlewaretoken" value="GnHOa4t53wCUJcYxJaE略c1bp5j9wB08T0869">
                              
これは通常Djangoでアプリをつくるときと同じでformタグの下に{% csrf_token %}を書くと最終的なタグは上のようなhiddenの形になっています。
formタグを使うときは{% csrf_token %}を入れないと実行した段階でエラーになります。
しかし今回作ったformを使わずにfetchでデータを送信するとcsrfmiddlewaretokenがないのにエラーになりませんでした。つまり自己責任でCSRF対策してくださいということだと思います。

またcsrfトークンは2種類あるようです。こちらhttps://kikuichige.com/11885/を参考にしてください。この実験ではfetchでもCSRFエラーになってます。今回作ったものはなぜかエラーになりません？

出来上がったアプリに投稿して要求ヘッダ見るとCookie: csrftoken=略があります。これはcsrfmiddlewaretokenとは別物のようです。またcookie自体送ってないときもあります。つまりこのCookie: csrftokenは機能してないように見えます。さらにbody（ペイロード）の中にはcsrfmiddlewaretokenはありません。そもそもcsrfmiddlewaretokenの値が来てないと思います。settings.pyのミドルウェアdjango.middleware.csrf.CsrfViewMiddlewareも有効な状態です。でもエラーにはなりません。

結局この辺クリアできてないので今回作った方法は本番での使用は避けたほうがいいかも。
APIの画面と同じformを使ったほうが無難だと思います。VueでPOSTも作ると、この部分はどうなっているか気になります。
その後、axiosを使った別サンプルでうまくいきました、下の記事になります。
また今回の記事もAxios版として1番下に追記しました。

【Vue.js入門】DjangoのtemplateにVuetifyでビルドしたHtml、CSS、jsが使えるのか試してみた

Djangoをバックエンド、Vue.jsのVuetifyでビルドしてできた静的ファイルHtml、css、jsの組み合わせが使えるのか知りたかった。フロントエンド開発はVuetifyで簡単に見た目のいいデザインができます。それで出来上がったも...

kikuichige.com

2022.09.03

<template>
  <div class="hello">
<div id="starting">
  <div class="container">
    <div class="row">
      <h1>投稿一覧</h1>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">タイトル</th>|
            <th scope="col">本文</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(article, index) in articles" :key=index>
            <th scope="row">{{article.article_id}}</th>
            <td>{{article.article_heading}}</td>|
            <td>{{article.article_body}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
</div>      
      

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
      
    data() {
        return {
            
            articles: [],
            loading: false,
            currentArticle: {},
            message: null,
           newArticle: {'article_heading': null, 'article_body': null },
        };
    },
    mounted() {
         this.getArticles();
    },
    methods: {
         getArticles() {
            
            this.loading = true;
            fetch('https://localhost-人それぞれ違うサーバー名.paiza-user-free.cloud:8000/api/article/',{credentials:'include'})
                .then(response => {
                    return response.json()
                  })
                  .then(data => {
                this.test=data,
                this.articles=data
                 })

          .catch((err) => {
           this.loading = false;
           console.log(err);
          })
         }
     },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

{% load static %}<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>vue-toukou</title><script defer="defer" src="{% static 'toukou/js/chunk-vendors.8a7b031a.js' %}"></script><script defer="defer" src="{% static 'toukou/js/app.63c511da.js' %}"></script><link href="{% static 'toukou/css/app.f999ea50.css' %}" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue-toukou doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<h1>RestFramwWorksにPOSTでJSONデータを送信する</h1>
    <p>article_heading: <input type="text" id="article_heading" size="30" value="2個目"></p>
    <p>article_body: <input type="text" id="article_body" size="30" value="POSTできた"></p>
    <p><input type="button" value="送信" class="btn"> </p>
    <p>削除article_id: <input type="text" id="article_id" size="30"></p>
    <p><input type="button" value="削除" class="btndel"> </p>
 <script>

	const btn = document.querySelector('.btn');
	const btndel = document.querySelector('.btndel');
	const url = 'https://localhost-人によって違う-1.paiza-user-free.cloud:8000/';


	const postFetch = () => {
            	
            	var data2 = document.getElementById("article_heading").value;
            	var data3 = document.getElementById("article_body").value
                var JSONdata = {
                    
                    article_heading: data2,
		            article_body: data3
                };

            


	    fetch("https://localhost-sumoayui-1.paiza-user-free.cloud:8000/api/article/", {
  "headers": {
    "accept": "application/json, text/javascript, */*; q=0.01",
    "accept-language": "ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7",
    "content-type": "application/JSON"
  },
  "referrer": "https://localhost-sumoayui-1.paiza-user-free.cloud:8000/article",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": JSON.stringify(JSONdata),
  "method": "POST",
  "mode": "cors",
  "credentials": "same-origin"
}).then((response) => {
        	if(!response.ok) {
        	    console.log('error!');
        	} 
             	return response.json();
   	 }).then((data)  => {
	        
	        location.reload();
	    }).catch((error) => {
		console.log('err');
	        console.log(error);
	    });
	};

const deleteFetch = () => {
            	var data1 = document.getElementById("article_id").value;
                var delurl="https://localhost-sumoayui-1.paiza-user-free.cloud:8000/api/article/"+data1+"/";
	    fetch(delurl, {
  "headers": {
    "accept": "application/json, text/javascript, */*; q=0.01",
    "accept-language": "ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7",
    "content-type": "application/JSON"
  },
  "referrer": "https://localhost-sumoayui-1.paiza-user-free.cloud:8000/article",
  "referrerPolicy": "strict-origin-when-cross-origin",
  
  "method": "DELETE",
  "mode": "cors",
  "credentials": "same-origin"
}).then((response) => {
        	if(!response.ok) {
        	    console.log('error!');
        	}
        	location.reload();
   	 });
	};
	btn.addEventListener('click', postFetch, false);
	btndel.addEventListener('click', deleteFetch, false);
	</script>

<div id="app"></div></body></html>

<template>
  <div class="hello">
<div id="starting">
  <div class="container">
    <div class="row">
      <h1>投稿一覧</h1>
      <p>タイトル: (article_heading) <input v-model="new_article_heading"><br></p>
      <p>本文: (article_body) <input v-model="new_article_body"><br></p>
      <button v-on:click="createNewUser">投稿</button>
      <p>削除article_id:  <input v-model="del_article_id"><button v-on:click="deleteid">削除</button></p>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">タイトル</th>|
            <th scope="col">本文</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(article, index) in articles" :key=index>
            <th scope="row">{{article.article_id}}</th>
            <td>{{article.article_heading}}</td>|
            <td>{{article.article_body}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
</div>      
      

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
      
    data() {
        return {
            new_article_heading:'',
            new_article_body:'',
            del_article_id:'',
            articles: [],
            loading: false,
            currentArticle: {},
            message: null,
           newArticle: {'article_heading': null, 'article_body': null },
        };
    },
    mounted() {
        axios.defaults.xsrfCookieName = 'csrftoken' ;// ←ココと
        axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"; // ←ココに追加しました
         this.getArticles();
    },
    methods: {
         getArticles() {
            
            this.loading = true;
            axios.get('https://localhost-人それぞれ違うサーバー名.paiza-user-free.cloud:8000/api/article/',{
  withCredentials: true
})
                .then(response => {
                    this.articles=response.data
                  })
          .catch((err) => {
           this.loading = false;
           console.log(err);
          })
         },
         createNewUser: function(){
             axios.post('https://localhost-人それぞれ違うサーバー名.paiza-user-free.cloud:8000/api/article/',{
                 "article_heading": this.new_article_heading,
                 "article_body": this.new_article_body
         
                 },{
                      withCredentials: true
                    })
                  .then(location.reload())
                  .catch(error => console.log(error))     
            },
        deleteid: function(){
            var delurl="https://localhost-人それぞれ違うサーバー名-1.paiza-user-free.cloud:8000/api/article/"+this.del_article_id+"/";
             axios.delete(delurl,{
                      withCredentials: true
                    })
                  .then(location.reload())
                  .catch(error => console.log(error))     
            }            
     },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>