Question

我试图使用Vue的发布请求发送信息，但每次我尝试我都会收到错误403 58 我的django服务还可以，我认为问题出在csrf令牌上，但我不知道如何用vue发送它

＆＃13;

var vue = new Vue({
    el:"#app",
    data: {
     nombre:"",
        apellido:"",
        password:""

    },

    methods:{
        enviar:function () {
            data = {
                "nombre":this.nombre,
                "apelldio":this.apelldio,
                "password":this.password
            };
            this.$http.post("http://localhost:8000/usuarios\\",data).then(function (data, status, request) {
                if(status ==200){
                    console.log(data);
                }
            },function () {
                console.log("Error");
            });


        }

    }

});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<h1>Insertar un nuevo usuario </h1>
<table id = "app">

        <tr><td>Nombre:</td><td><input type="texte" class="form-control" v-model="nombre"></td></tr>
        <tr><td>Apellido:</td><td><input type="texte" class="form-control" v-model = "apellido"></td></tr>
        <tr><td>Password:</td><td><input type="texte" class="form-control" v-model="password"></td></tr>
    <tr> <td> <button type="button" id = "enviar" class="btn btn-info" @click="enviar">Enviar</button></td></tr>

</table>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
 {% csrf_token %}
 <!-- here goes the scripts of vue and vue resource!>

＆＃13;

Answer 1

您可以使用一种方法，该方法涉及使用javascript获取csrf标记，然后将其作为标题传递给POST请求here in Django documentation。在该链接中还有关于获取csrf标记值的示例。

此外，如果端点不需要这种保护，您可以像this example一样禁用它。

Answer 2

您可以使用以下内容：

{% csrf_token %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>

<script>
    var csrf = document.querySelector('[name="csrfmiddlewaretoken"]').value;

    Vue.http.interceptors.push(function (request, next) {
        request.headers['X-CSRF-TOKEN'] = csrf;
        next();
    });

    // Or maybe
    Vue.http.headers.common['X-CSRF-TOKEN'] = csrf;
</script>

您也可以像这样使用它，例如：

<script>
    var csrf = '{{ csrf_token }}';

    Vue.http.headers.common['X-CSRF-TOKEN'] = csrf;
    // Or other way
    // Vue.http.interceptors.push(...);
</script>

注意：我不是django开发人员，但为您提供了基本想法，因此请查看doc以获取更多信息。

如何使用vue向django发送帖子请求而不会收到403错误？

2 个答案: