Vue.js 与服务 POST 请求不兼容吗？

Posted 2023-02-22

【中文标题】Vue.js 与服务 POST 请求不兼容吗？

【英文标题】：Is Vue.js Incompatible With Serving POST Requests?

【发布时间】：2019-11-04 18:27:38

【问题描述】：

我正在尝试使用 Vue CLI 创建的 Vue.js 项目来做 [事情]。 [Thing] 对这个问题不是很重要，所以为了简洁起见，我将省略它。当我为这个项目运行本地网络服务器时，我注意到了

$ npm run serve

GET 请求工作正常；但是 POST 请求给了我一个 404 - “无法 POST”。我需要能够同时做到这两点。

使用Express，只需在默认的router.get(...) 之外添加router.post(...)，即可使用GET 和POST 提供相同的页面。但是，在 Vue.js 中，这似乎很困难。

我花了一些时间在Vue Router 上玩，但仔细阅读文档后，我没有找到一个配置选项来告诉它“这是如何响应 POST 请求”——它似乎需要 GET。

但也许我正试图将一个方形钉子敲入一个圆孔。 Vue.js 面向在浏览器中运行的应用程序，并且浏览器发送 GET 请求（目前我对表单提交不感兴趣......）其中 POST 请求往往更多是 Web 应用程序/集成/后端有点像。

你们怎么看 - 有什么明显的我遗漏的东西，还是我应该以“简单”的方式做到这一点并切换到 Express？

更新：我的“问题”不是 Vue.js，特别是 - 它是二进制 vue-cli-service，肯定 监听 GET，但不监听 POST。 （来自 Postman 的 GET 成功；来自 Postman 的 POST 失败。）如果我为部署而构建，webpack 会将项目转换为 html/JS/CSS，由不同的 Web 服务器提供服务，并且 POST 工作得很好——它只是在 vue 的开发模式下-cli-service 正在本地为我的应用程序提供服务，我无法使用 POST 请求。

是否有一种未记录的方法可以使 vue-cli-service 响应 POST 请求？我已经搜索了文档，但没有找到任何东西。我不确定如何让另一个 Web 服务器为 Vue.js 项目提供服务，因为 webpack 配置是...复杂的。

【问题讨论】：

Vue 是一个前端框架，而不是像 express 那样的后端框架。路由器可能只处理 GET 请求，因为其他任何东西看起来都更像一个 API

【参考方案1】：

Vue 路由器没有接收到（GET）请求并做出响应，它只是读取当前 URL 并插入相应的组件。所以简而言之，不，没有 POST 请求处理程序......我认为它甚至没有处理 GET 请求，只是读取看起来像 GET 请求的 URL。

如果您尝试在应用内的页面之间进行 POST，那么 Vuex 就是您想要的。 如果您尝试从外部 POST 到您的应用程序，让一个实际的服务器监听您可以 ping 的请求会更容易（即 Express）。

可能可以通过您的应用使用Axios 来执行此操作。它可以侦听来自 POST 请求的响应，所以如果它正在侦听，我看不出它为什么无法接收。但是，我怀疑您必须从运行您的应用程序的机器上监听一个端口，这将是一个主要的安全问题（如果客户端的浏览器/操作系统/防病毒软件甚至允许您这样做的话）。

【讨论】：

它正在接收一个 GET 请求。我可以用 Postman 验证这一点： GETs 成功； POST 失败。

这只是语义。请求/响应模式是客户端和服务器之间发生的事情。通常，GET 请求从服务器请求特定资源，然后由服务器提供。 Vue 的工作方式与“提供”整个应用程序并在客户端呈现，而 Vuex 在其中管理一个小窗口并不完全相同。但是，如果您使用 Nuxt，则可以在服务器端执行此操作并获得典型的 GET 模式。

【参考方案2】：

自从我发布这个问题以来已经快两周了，但我什至没有发布这个问题，直到我自己一个星期都在努力解决这个问题。经过大量的工作和更多的死胡同，我终于找到了一个解决方案，这对我的血压来说是健康的。这里是：

决定也许我最好的选择是查看 the vue-cli source code，我碰巧注意到它包含文档 docs/config 下的 README.md 文件中关于 devserver 选项的内容看起来有点稀疏，但它也提到 支持 webpack-dev-server 的所有选项。哦。 Webpack documentation 显示一个 devserver.before 选项，允许您访问 Express 应用程序对象并向其添加您自己的自定义中间件 这允许您拦截 POST 并将其重定向为 GET Which this guy 和我遇到了完全相同的问题，最终做到了。 （请注意，他使用了 devserver.setup，它做同样的事情，但不推荐使用 devserver.before。）在 vue.config.js 中，包含

devServer: 
    before: function(app) 
        app.post('/about.html', function(req, res) 
          res.redirect('/about.html');
        );
    ,

【讨论】：

好主意。如果我错了，请纠正我，但这只能在你有 webpack 作为你的服务器的开发环境中工作？那么不能在生产中工作吗？

我相信这是正确的。就我的目的而言，最小化的生产构建工作得很好，只是在上传新版本和看到它生效之间需要 5-7 分钟。对于实际部署来说并不可怕，但在开发时却无法忍受。

Mike，感谢您在 *** 上如此直言不讳。您“大声”解决问题确实帮助我解决了类似的困境。

@coltoneakins 不客气！很高兴我能够帮助某人。 ?