Как установить глобальный заголовок $ ax ios в NuxtJS - PullRequest
Новая
       63

Как установить глобальный заголовок $ ax ios в NuxtJS

2 голосов
/ 25 мая 2020

Я уже два дня пытаюсь заставить это работать. Я новый пользователь Nuxt (хотя уже несколько лет использую Vue), поэтому я просто пытаюсь понять, как все это работает.

В моем проекте Nuxt установлен модуль Ax ios:

nuxt.config. js

export default {
  plugins: [
    ...
    '~/plugins/axios',
  ],
  axios: {
    baseURL: 'https://my-url.com/wp-json/wp-v2',
    https: true,
  },
}

plugins / ax ios. js

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    $axios.setToken(env.WP_API_KEY, 'Bearer');
  });
}

И на своей странице я пытаюсь использовать функцию asyncData для извлечения данных из моего WordPress API, как такового: 

export default {
  async asyncData(context) {
    const data = await context.$axios.$get('/media');
    console.log(data);
    return { data };
  }
}

Однако я продолжаю получать сообщение об ошибке 401 Not Authorized, по сути, о том, что мой Authorization: Bearer <token> не проходит. Однако с помощью Postman я могу убедиться, что эта конечная точка действительно работает и возвращает все JSON, которые мне нужны, поэтому проблема должна быть ie так же, как я настроил глобальный заголовок ax ios.

Было сложно найти какой-либо реальный пример того, как установить глобальный заголовок с помощью модуля Nuxt / Ax ios. Я вижу в docs , как использовать setToken, однако он точно не показывает, где это разместить.

Что я неправильно настроил и как это исправить ?

1 Ответ

4 голосов
/ 25 мая 2020

Довольно типично, что он работает через 15 минут после публикации вопроса.

Установка такого заголовка, похоже, работает. Я не уверен, почему метод setToken не работал. 

export default ({ $axios, env }) => {
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer ${env.WP_API_KEY}`;
  });
}
...