DjangoのtemplateにvuetifyをCDNで使っています。
POSTでAPIにデータを送ると
Failed: CSRF token missing or incorrect.
のエラーが帰ってきてmysqlにデータを登録することができません。
CSRFのトークンを同時に送信する必要があることはわかったのですが、どのように取得して送信するのかがわからず困っています。
ご教授いただけないでしょうか。
ちなみにGETは問題なく動作します。
以下、関係なさそうな部分は省いたコードです。
index
1ボタン部分 2<button class="btn btn-info" v-on:click="postArticle()">取得</button> 3 4送信データ 5newArticle: { 'article': "aaa", 'title': "bbb" }, 6 7API部分 8postArticle: function() { 9 this.loading = true; 10 this.$http.post('/api/articles/',this.newArticle) 11 .then((response) => { 12 this.loading = false; 13 this.getArticles(); 14 }) 15 .catch((err) => { 16 this.loading = false; 17 console.log(err); 18 }) 19},
url.py urlpatterns = [ path('api/', include(router.urls)), ]
router.py router = routers.DefaultRouter() router.register('articles', ArticlesViewSet)
viewsets.py class ArticlesViewSet(viewsets.ModelViewSet): queryset = Article.objects.all() serializer_class = ArticleSerializer filter_backends = (filters.SearchFilter,) search_fields = ('title', 'article')
serializer.py class ArticleSerializer(serializers.ModelSerializer): class Meta: model = Article fields = '__all__'
よろしくお願い致します。
追記です。
HTML内に{% csrf_token %}を埋め込みました。
そしてaxiosをincludeしてAPIのPOST部分を
axios.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN' : document.querySelector('input[name="csrfmiddlewaretoken"]').getAttribute('value') };
として、axiosのヘッダーにCSRFのトークンを入れてPOSTを投げました。
consoleでaxiosの中身を見てみると
common: X-Requested-With: "XMLHttpRequest" X-CSRF-TOKEN: "qmn8Mh1t1kes7USGG03jVUgIlUwxXkcMuJgdL7HM07ZSxm5P028EWwyM
という形で確かにAPIに投げるデータのヘッダーにCSRFのトークンは入っています。
しかし、同じエラーでした。
djangoのsettingの
'django.middleware.csrf.CsrfViewMiddleware',
を消してもエラー内容は変わりませんでした。
そのため、django以外のところで弾かれているのかもしれません。
引き続き、どなたかわかる方がおられましたらお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。