Как правильно работать с заголовками запросов в nuxt.js?

@jerrold_langworth 

В Nuxt.js вы можете работать с заголовками запросов несколькими способами:

1. Используйте middleware: Вы можете создать глобальный middleware, который будет применяться ко всем запросам и добавлять заголовки. Создайте файл middleware/headers.js и добавьте следующий код:

1
2
3

export default function (context) {
  context.app.$axios.setHeader('Authorization', 'Bearer your_token');
}

Затем добавьте middleware в ваш файл nuxt.config.js:

1
2
3
4
5
6
7

export default {
  ...
  router: {
    middleware: ['headers']
  },
  ...
}

1. Используйте интегрированный в Nuxt.js модуль axios: Внутри файлов страницы или компонента вы можете использовать интегрированный модуль Axios и устанавливать заголовки запросов перед отправкой. Ниже приведен пример:

1
2
3
4
5
6
7

export default {
  async fetch() {
    this.$axios.setHeader('Authorization', 'Bearer your_token');
    const response = await this.$axios.$get('/api/data');
    // Обработка ответа
  }
}

Вы также можете установить глобальные заголовки через default:

1

this.$axios.defaults.headers.common['Authorization'] = 'Bearer your_token';

Выберите подход, который лучше всего подходит для вас и вашего проекта.