Как вы используете devServer.proxy в Vue?

В настоящее время я пытаюсь передать свои запросы из моего приложения Vue, чтобы я мог отправлять файлы cookie с сервера, который существует отдельно от моего внешнего интерфейса.

У меня есть интерфейс на порту 8080 и сервер на порту 3000. Однако, когда я пытаюсь настроить свой прокси для использования порта 3000 в Vue с помощью devServer.proxy, он все еще отправляет запрос на 8080.

Вот мой код в vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

Вот мой запрос axios:

axios.post(`/api/auth/login/`, loginDetails, {
        withCredentials: true, 
        credentials: 'include'
    })
    .then(function (response) {
        console.info('login response: ', response)
    })
    .catch(error => {
        console.error(error)
    });

Вот ошибка, которую я получаю, которая показывает, что интерфейс все еще отправляет на 8080:

Я также пытался использовать следующее в vue.config.js и не имел префикса к URL-адресу запроса, но безрезультатно.

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
}

Вот документация, которую я использую https://cli.vuejs.org/config/#devserver

🤔 А знаете ли вы, что...
Node.js активно использует асинхронное программирование и обратные вызовы для обработки многозадачности.


59
1

Ответ:

Решено

Решение:

Изучив журналы сервера, я обнаружил, что прокси-сервер работает и пытается найти маршрут /api/auth/login на моем сервере. Однако у меня был только /auth/login, поэтому сервер отправил статус 404.

Я не уверен, что это правильный способ сделать это, но я просто добавил маршрут сервера с помощью /api, и это сработало так:

app.use('/api/auth', authRouter)

Раньше это выглядело так:

app.use('/auth', authRouter)

Спасибо Estus Flask за советы в комментариях.