Как решить эту проблему прокси в Vue.js?

Question

В моем родительском каталоге у меня есть папка:

• A client, которая содержит приложение Vue, размещенное на порте 8080. Это приложение в основном имеет форму контакта.
• Папка sever, которая содержит приложение Node, размещенное на порте 5000. Основная цель этого приложения - отправить электронное письмо с информацией, полученной из формы контакта внешнего интерфейса.

Компонент внешнего интерфейса Vueприложение вызывает бэкэнд так: axios.post('http://localhost:5000', {...}). Затем этот POST-запрос axios обрабатывается в индексном файле бэкэнда с помощью app.post('/', (req, res) => {}).

До этого момента все работало. Приложение разрывается только при попытке добавить прокси, например:

1. Я создаю файл vue.config.js прямо в каталоге клиента и добавляю код:

   module.exports = {
       devServer: {
           proxy: {
               '/': {
                   target: 'http://localhost:5000',
                   ws: true,
                   changeOrigin: true
               }
           }
       }
   };
   

2. Я обновляю запрос axios: axios.post('/', {...})

После этого я получаю сообщение об ошибке: WebSocket connection to 'ws://localhost:8080/sockjs-node/381/hc0dun1b/websocket' failed: Invalid frame header

Опять же, моя цель - создать прокси дляhttp://localhost:5000 Axios Call. Проблема в том, что он кажется застрявшим в порту 8080, о чем свидетельствует ошибка. Кстати, у меня включена функция CORS.

Заранее спасибо за любые ответы.

Answer 1

В ваших правилах прокси указывается использовать веб-сокеты для соединения, что и означает ошибка. Вы не можете сделать сообщение на веб-сокете. Судя по всему, изменение настроек прокси на это должно исправить это,

devServer: {
    proxy: 'http://localhost:5000'
}