Vue.js несовместим с обслуживанием POST-запросов? - PullRequest
Новая
       55

Vue.js несовместим с обслуживанием POST-запросов?

1 голос
/ 22 июня 2019

Я пытаюсь сделать [вещь] с проектом Vue.js, созданным с помощью Vue CLI.[Вещь] не является супер-важной в этом вопросе, поэтому я опущу ее для краткости.Я заметил, когда я запускаю локальный веб-сервер для этого проекта с

$ npm run serve

, что запросы GET работают просто отлично;но запросы POST дают мне 404 - «Cannot POST».Мне нужно быть в состоянии сделать и то и другое.

Используя Express , достаточно просто обслуживать одну и ту же страницу как GET, так и POST, просто добавив router.post(...) в дополнение к стандартному router.get(...),Однако в Vue.js это кажется трудным.

Я провел некоторое время, играя с Vue Router , но, просматривая документацию, я не нашел опции конфигурации, чтобы сказать это "Вот как ответить на POST-запрос "- похоже, требуется GET.

Но, возможно, я пытаюсь втиснуть квадратный колышек в круглое отверстие.Vue.js ориентирован на приложения, которые запускаются в браузере, и браузеры отправляют GET-запросы (на данный момент меня не интересует отправка форм ...), где POST-запросы, как правило, больше похожи на веб-приложение / интеграцию / серверную частьчто-то в этом роде.

Что вы, ребята, думаете - есть что-то очевидное, что я упускаю, или я должен сделать это "простым" способом и переключиться на Express?

ОБНОВЛЕНИЕ: Моя "проблема" - это не Vue.js, в частности - это двоичный сервис vue-cli-service, который определенно слушает GET, но не POST.(GETs от Postman завершаются успешно; POSTs от Postman завершаются неудачно.) Если я собираю для развертывания, webpack превращает проект в HTML / JS / CSS, который обслуживается другим веб-сервером, а POST работают просто отлично - это просто в режиме dev, где vue-cli-service обслуживает мое приложение локально, поэтому я не могу использовать POST-запросы.

Существует ли недокументированный способ заставить vue-cli-service отвечать на POST-запросы?Я просмотрел документацию, но ничего не нашел.Я не уверен, как заставить другой веб-сервер обслуживать проект Vue.js, потому что конфигурация веб-пакета ... сложна.

Ответы [ 2 ]

2 голосов
/ 24 июня 2019

Vue Router не получает (GET) запрос и не отвечает, он просто читает текущий URL и вставляет соответствующий компонент. Короче говоря, нет, обработчик запросов POST отсутствует ... Я бы сказал, что он даже не обрабатывает запросы GET, а просто читает URL, который выглядит как запрос GET.

Если вы пытаетесь POST между страницами в вашем приложении, Vuex - то, что вам нужно. Если вы пытаетесь отправить POST-сообщение в свое приложение извне, то фактическое прослушивание сервером запросов, которые вы можете пропинговать, будет проще (например, Express).

Там может быть способом использовать Axios , чтобы сделать это из вашего приложения. Он может прослушивать ответы от запросов POST, поэтому, если бы он слушал, я не понимаю, почему он не мог получить. Тем не менее, я подозреваю, что вам придется прослушивать порт с компьютера, на котором запущено ваше приложение, что может стать серьезной проблемой безопасности (если браузер / ОС / антивирус клиента даже позволит вам).

0 голосов
/ 03 июля 2019

Прошло уже почти две недели с тех пор, как я отправил этот вопрос, но я даже не публиковал вопрос, пока в течение недели не боролся с проблемой самостоятельно.Я наконец-то пришел к решению после долгих головокружений и большего количества тупиков, чем было бы полезно для пересчета моего кровяного давления.Вот оно:

  1. Решив, что, пожалуй, лучше всего было бы посмотреть исходный код vue-cli , я заметил, что он включает в себя документацию
  2. READMEФайл .md в docs / config немного скуден в том, что он говорит о параметре devserver, но в нем также упоминается, что Все опции для webpack-dev-server поддерживаются .Ооо.
  3. В документации Webpack показана опция devserver.before, которая позволяет вам получить доступ к объекту приложения Express и добавить к нему собственное пользовательское промежуточное ПО
  4. Это позволяет вам перехватить POST и перенаправить его как GET
  5. Что в итоге сделал этот парень , у которого была точно такая же проблема, как и у меня.(Обратите внимание, что он использовал devserver.setup, который делает то же самое, но не рекомендуется в пользу devserver.before.) В vue.config.js включите 
devServer: {
    before: function(app) {
        app.post('/about.html', function(req, res) {
          res.redirect('/about.html');
        });
    },
}
...