Как использовать webpack dev proxy с Nuxt

Question

Используя Nuxt для разработки универсального приложения JS, я пытаюсь настроить dev-прокси веб-пакета так, чтобы, только в процессе разработки, он запрашивал /api получить доступ к http://127.0.0.1:500/api где они достигнут Python REST API. Следуя документации Nuxt, я расширил конфигурацию webpack в nuxt.config.js вот так:

build: {
  extend (config, { isDev }) {
    // Proxy /api to Python only in dev
    if (isDev) {
      const devServer = {
        proxy: {
          '/api': 'http://127.0.0.1:5000'
        }
      }
      config.devServer = devServer;
    }
  }
}

Если я регистрирую конфигурацию, я вижу, что изменение применяется:

...
devServer: { proxy: { '/api': 'http://127.0.0.1:5000' } } }
...

Тем не менее, когда я захожу на сайт http://127.0.0.1:8080/api/things, мое приложение Nuxt возвращается (оно работает на порте 8080 в dev), указывая, что прокси-сервер dev веб-пакета не перехватывает /api путь и выполнение проксирования. Просто чтобы подтвердить, что назначение прокси-сервера работает, если я захожу на сайт http://127.0.0.1:5000/api/things, я получаю ожидаемый ответ API. Почему, когда я расширил конфигурацию веб-пакета Nuxt для включения прокси-сервера dev веб-пакета, прокси-сервер не работает?

У меня, однако, был успех с модулем @nuxt/proxy, но, что очень важно, я не смог найти способ сделать так, чтобы он влиял только на разработку, а не на производство. Эта часть nuxt.config.js выглядело так:

axios: {
  proxy: true
},
proxy: {
  '/api': 'http://127.0.0.1:5000'
},

Я рад использовать модуль @nuxt/proxy вместо (поверх?) Веб-пакета dev proxy, если его можно заставить работать только в разработке.

Answer 1

Тьфу, я лаю не на том дереве.

Nuxt нужен для прокси, даже в производстве. Когда мой первоначальный запрос обрабатывается, а приложение обрабатывается на стороне сервера, любые запросы API необходимо проксировать, потому что сервер Node выполняет вызов, а не браузер, поэтому эти запросы API даже не попадут на мой производственный маршрутизатор, такой как nginx. или HAProxy (который обычно делает мою маршрутизацию для / а также /api к соответствующим услугам).

Answer 2

Мне нужно было это сделать, и я смог решить эту проблему, используя следующее в nuxt.config.js

      export default {
  // other config ...

  ...process.env.NODE_ENV === 'development' && {
    proxy: {
      '/api': 'http://localhost:8000',
    }
  },
}

Этот код добавит ключ прокси в конфигурацию nuxt только в том случае, если мы делаем сборку для разработки.

Ссылка на синтаксис, используемый для вставки поля условного объекта (ранее мне это было неизвестно): /questions/35037425/v-javascript-kak-uslovno-dobavit-chlen-k-obektu/35037461#35037461