Как добавить заголовки в ответ статических файлов Nuxt?

Question

У меня есть файл json в статической папке, и я пытаюсь получить к нему доступ с другого веб-сайта, но у меня проблема с CORS.

Как добавить заголовки (например, Access-Control-Allow-Origin) в ответ статических файлов?

Я пробовал это https://github.com/nuxt/nuxt.js/issues/2554#issuecomment-363795301,, но не работал со статическими файлами.

module.exports = function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    next()
}

Answer 1

Nuxt имеет встроенную опцию свойства render, которую вы можете использовать в файле nuxt.config.js.

Если вы хотите добавить заголовки контроля доступа для статических файлов, просто используйте функцию setHeaders.

См. https://nuxtjs.org/api/configuration-render#static.

В фоновом режиме Nuxt использует пакет serve-static (также для других опций).

Пример:

render: {
   static: {
     setHeaders(res) {
       res.setHeader('X-Frame-Options', 'ALLOWALL')
       res.setHeader('Access-Control-Allow-Origin', '*')
       res.setHeader('Access-Control-Allow-Methods', 'GET')
       res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  }
}

Answer 2

Если вы используете axios для выполнения HTTP-вызовов, вы можете использовать Nuxt-версию Axios . Там вы можете легко использовать опцию proxy в сочетании с Proxy Module