Question

我正在尝试使用vuejs将发布数据发送到django Restful API。这是我到目前为止的代码：

<script>
import axios from 'axios'
import VueCookies from 'vue-cookies'
//3RD ATTEMPT
VueCookies.set("csrftoken","00000000000000000000000000000000");
// @ is an alias to /src
export default {
  name: "Signup",
  components: {},
  data: () => {
  },
  methods: {
    sendData(){
        // 2ND ATTEMPT
        // $cookies.set("csrftoken", "00000000000000000000000000000000");
        axios({
            method: 'post', //you can set what request you want to be
            url: 'https://localhost:8000/indy/signup/',
            data: {
                csrfmiddlewaretoken: "00000000000000000000000000000000",
                first_name: "wade",
                last_name: "king",
                email: "wade%40mail.com",
                password1: "05470a5bfe",
                password2: "05470a5bfe"
            },
            // 1ST ATTEMPT
            // headers: {
            //     Cookie: "csrftoken= 00000000000000000000000000000000"
            // },
            withCredentials: true
        })
    }
  }
</script>

我有一个按钮，单击该按钮即可执行sendData（）方法。该代码使用axios库将发布请求发送到在http://localhost:800/indy/signup/

上运行的django API。

仅向API发送发布请求的问题在于，为了防止跨站点响应伪造（CSRF），它将被阻止，我不太了解CSRF，但是我知道csrftoken是否设置为cookie并具有值与csrfmiddlewaretoken相同，则帖子应通过API。

您可以在我提供的代码中看到我设置cookie的尝试

第一次尝试）

headers: {
    Cookie: "csrftoken= 00000000000000000000000000000000"
},

在这里，我试图直接在标题中设置cookie。当我单击发送时，我的浏览器控制台出现错误，提示 refused to set unsafe header "Cookie"

第二次尝试）

$cookies.set("csrftoken", "00000000000000000000000000000000");

在这里，我尝试使用vue-cookies模块设置cookie。当我单击发送时，出现以下错误， net::ERR_SSL_PROTOCOL_ERROR

3RD尝试）

VueCookies.set("csrftoken","00000000000000000000000000000000");

在这里，我尝试使用vue-cookies模块设置全局cookie。当我单击发送时，出现与尝试2相同的错误

重要提示： 但是，当我使用以下curl命令从终端将发布数据发送到API时，它可以正常运行

curl -s -D - -o /dev/null \
-H 'Cookie: csrftoken= 00000000000000000000000000000000' \
--data 'csrfmiddlewaretoken=00000000000000000000000000000000&first_name=wade&last_name=king&email=wade%40mail.com&password1=05470a5bfe&password2=05470a5bfe' \
http://localhost:8000/indy/signup/

我的主要问题是如何使用vuejs复制此curl请求？我在线查看了所有内容，而没有一个教程涉及设置cookie。

Answer 1

我前一段时间发布了这个问题，我设法通过在与django后端相同的网络上运行vue前端来解决此问题。请按照本教程中的说明进行操作：integrating vuejs and django 设置好应用程序后，我就可以使用：

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"

例如，这是我的登录页面

<template>
    <div class = "container">
        <h2>Sign In</h2>
        <b-form v-on:submit.prevent="submit()">
            <b-form-group id="signin" label="">
                <!-- dynamic error message -->
                <p class="loginErr" v-if="logErr">Incorrect Username or Password</p>
                <b-form-input 
                    id="signin-email"
                    v-model="username"
                    placeholder="Email"
                    required
                ></b-form-input>

                <b-form-input 
                    id="signin-password"
                    v-model="password"
                    placeholder="Password"
                    required
                    type="password"
                ></b-form-input>



            </b-form-group>

            <b-button v-if="!loading" type="submit" variant="primary">Submit</b-button>
            <b-spinner v-if="loading"></b-spinner>
        </b-form>

    </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
export default {

    data: ()=>{
        return{
            loading: false,
            logErr: false,
            username:'',
            password:'',
            next: '%2Findy%2Fprofile%2F'
        }
    },
    created: function(){

    },
    methods: {
        submit(){
            var vm = this;
            vm.loading = true;
            var dataStr = 'username='+vm.username+'&password='+vm.password

            //set the csrf tokens so django doesn't get fussy when we post
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"

            axios.post('http://localhost:8000/api/signin/', dataStr)
                .then(function (response) {
                    vm.loading = false;
                    //determine if indy accepts the login request

                    var res = response.data
                    console.log(response.data)


                    if(!res.login){
                        vm.logErr = true;
                    }else{
                        vm.redirect('home');
                    }


                })
                .catch(function (error) {
                    //currentObj.output = error;
                });
        },
        redirect(path) {
            this.$router.push('/' + path);
        }
    }
}
</script>
<style>
.loginErr{
    color: orange;
}
</style>

如何在Vue.js发布期间设置Cookie

1 个答案: