как установить куки во время записи vuejs

Question

Я пытаюсь отправить данные публикации в django Restful API, используя vuejs. вот код, который у меня есть:

<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 для отправки запроса на публикацию в API django, работающем на http://localhost:800/indy/signup/

Проблема с простой отправкой почтового запроса в API заключается в том, что он будет заблокирован для предотвращения подделки межсайтовых ответов (CSRF). Я не совсем понимаю CSRF, но я знаю, установлен ли csrftoken как cookie и имеет ли он то же значение, что и csrfmiddlewaretoken, то пост должен пройти через API.

Вы можете увидеть мои попытки установить cookie в коде, который я предоставил

1-я ПОПЫТКА)

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

Здесь я пытаюсь установить cookie прямо в шапке. Когда я нажимаю кнопку отправить, в консоли браузера появляется сообщение об ошибке: refused to set unsafe header "Cookie"

2-Я ПОПЫТКА)

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

Здесь я пытаюсь установить cookie с помощью модуля vue-cookies. Когда я нажимаю отправить, я получаю следующую ошибку: net::ERR_SSL_PROTOCOL_ERROR

3-я попытка)

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

Здесь я пытаюсь установить глобальный файл cookie с помощью модуля vue-cookies. Когда я нажимаю отправить, я получаю ту же ошибку, что и попытка 2

ВАЖНО: Однако когда я отправляю данные поста в API с моего терминала с помощью следующей команды curl, она отлично работает

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? Я просмотрел все онлайн, и ни одно из руководств не касалось настройки файлов cookie.

Answer 1

Я опубликовал этот вопрос некоторое время назад, мне удалось обойти его, запустив интерфейс vue в той же сети, что и серверная часть django. Следуйте этому руководству для получения инструкций: интеграция vuejs и 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>