如何在 vuejs 发布期间设置 cookie

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发送post请求

仅向 API 发送 post 请求的问题在于，它会被阻止以防止跨站点响应伪造 (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

第三次尝试）

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 一旦我设置了应用程序，我就可以更干净地设置 cookie：

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>