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

Question

我正在尝试使用 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 配置是...复杂的。

Answer 1

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

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

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

Answer 2

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

1. 决定也许我最好的选择是查看 the vue-cli source code，我碰巧注意到它包含文档
2. docs/config 下的 README.md 文件中关于 devserver 选项的内容看起来有点稀疏，但它也提到 支持 webpack-dev-server 的所有选项。哦。
3. Webpack documentation 显示一个 devserver.before 选项，允许您访问 Express 应用程序对象并向其添加您自己的自定义中间件
4. 这允许您拦截 POST 并将其重定向为 GET
5. 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');
        });
    },
}