WordPress REST API возвращает 401 несанкционированный при публикации через Axios и действительный JWT

Question

Я пытаюсь опубликовать данные из формы в WordPress REST API через приложение Vue / Nuxt, используя Axios и JWT.

Я могу получить действительный токен и сохранить его в виде файла cookie, нокогда я пытаюсь опубликовать данные в API, я получаю 401 несанкционированную ошибку с сообщением "rest_cannot_create" - извините, вам не разрешено публиковать в качестве этого пользователя .

Пользователь, о котором идет речь, авторизован JWT.Я пробовал использовать их как Автор (создавать и редактировать свои собственные сообщения) и Редактор (может создавать, редактировать и удалять свои собственные сообщения), но оба имеют одинаковый результат.

Мой код приведен ниже:

submitForm: function() {
    let formData = {
    type: 'kic_enquiries',
    title: {
        rendered: 'Enquiry from ' + this.firstname + ' ' + this.lastname + ' [' + new Date() + ']'
    },
    acf: {
        enquiry_name:    this.firstname + ' ' + this.lastname,
        enquiry_email:   this.emailaddress,
        enquiry_phone:   this.phonenumber,
        enquiry_message: this.message
    }
};
this.formSubmission.push(formData);

const bodyFormData = new FormData();
      bodyFormData.set('username', 'username');
      bodyFormData.set('password', 'password');

axios ({
    method: 'post',
    url: url + '/wp-json/jwt-auth/v1/token',
    data: bodyFormData,
    config: {
        headers: { 'Content-Type': 'multipart/form-data' }
    }
})
.then(res => {
    this.$cookies.set("cookiename", res.data.token, "3MIN");
}).catch(function(error) {
    console.error( 'Error', error );
}).finally(() => {
     console.log('Posting form...');

     axios ({
         method: 'post',
         url: url + '/wp-json/wp/v2/kic-enquiries',
         data: JSON.stringify(this.formSubmission),
         config: {
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
                 'Authorization:': 'Bearer ' + this.$cookies.get("cookiename")
             }
         }
    })
    .then(submitResponse => {
        console.log('Form submitted...' + submitResponse)
        return submitResponse;
    }).catch(function(error) {
        console.error( 'Error', error );
    });
});

Нужно ли использовать перехватчики?Я много видел о них в Интернете, но не могу найти ничего, что объясняет, как мне нужно использовать их в моей ситуации.

ОБНОВЛЕНИЕ

Дальнейшие исследования показываюттокен работает, когда отправляется с теми же настройками и данными, что и приложение, через Postman, поэтому, похоже, проблема с кодом.

Не удается отправить сообщение из-за неправильной отправки токена?

ОБНОВЛЕНИЕ 2 - 15 февраля 2019

Я изменил свой код, чтобы использовать await / async и наблюдатель для проверки на генерируемый токен, но я все еще получаю 401ошибка.Обновленный код приведен ниже:

<script>
    import axios from 'axios'

    export default {
        data: function() {
            return {
                firstname: null,
                lastname: null,
                emailaddress: null,
                phonenumber: null,
                message: null,
                formSubmission: [],
                res: [],
                authStatus: false,
                token: null
            }
        },
        methods: {
            submitForm: async function() {
                let formData = {
                    type: 'kic_enquiries',
                    title: {
                        rendered: 'Enquiry from ' + this.firstname + ' ' + this.lastname + ' [' + new Date() + ']'
                    },
                    acf: {
                        enquiry_name:    this.firstname + ' ' + this.lastname,
                        enquiry_email:   this.emailaddress,
                        enquiry_phone:   this.phonenumber,
                        enquiry_message: this.message
                    },
                    status: 'draft'
                };
                this.formSubmission.push(formData);
                console.log(JSON.stringify(this.formSubmission));

                await this.getToken();
            },
            getToken: function() {
                console.info('Getting token...');

                const bodyFormData = new FormData();
                bodyFormData.set('username', 'user');
                bodyFormData.set('password', 'pass');

                axios ({
                    method: 'post',
                    url: link,
                    data: bodyFormData,
                    config: {
                        withCredentials: true,
                        headers: { 'Content-Type': 'multipart/form-data' },
                    }
                })
                .then(res => {
                    this.$cookies.set("XSRF-TOKEN", res.data.token, "30MIN");
                    console.log('Cookie:' + this.$cookies.get("XSRF-TOKEN"));
                }).catch(function(error) {
                    console.error( 'Error', error );
                }).finally(() => {
                    this.authStatus = true;
                    this.token = this.$cookies.get("XSRF-TOKEN");
                });
            }
        },
        watch: {
            authStatus: function() {
                if (this.authStatus == true) {
                    console.info('Posting form...');

                    axios ({
                        method: 'post',
                        url: 'link,
                        data: this.formSubmission,
                        config: {
                            withCredentials: true,
                            headers: {
                                'Authorization:': 'Bearer ' + this.token
                            }
                        }
                    })
                    .then(submitResponse => {
                        console.log('Form submitted...' + submitResponse)
                        return submitResponse;
                    }).catch(function(error) {
                        console.error( 'Error', error );
                    });
                }
                else {
                    console.error('Token not generated')
                }
            }
        }
    }
</script>

Итак, отправка формы должна ждать, пока токен не будет сгенерирован и применен, прежде чем он попытается сделать запрос к API.

ВВ документах об ошибках, которые я заметил, withCredentials устанавливается на false, хотя в конфигурации он установлен на true.С чего бы это?

Answer 1

**Try this**
let headers = {
                 'Content-Type': 'application/json',
                 'Authorization': 'Bearer ' + 'Authorization:': 'Bearer ' + this.token
                  }
                  this.axios.post('link', JSON.stringify(this.formSubmission), {
                  headers: headers})

Перейдите по этой ссылке