vue + nuxt.js - 如何读取从外部请求接收的 POST 请求参数

Question

我有一个外部表单，它向我的 nuxt 应用程序提交发布请求。 我目前正在努力找出如何在我的 nuxt 页面中访问这些 POST 请求参数？

到目前为止，我找到了“asyncData”方法，但是当我尝试通过“params”对象访问提交的参数时，它总是“未定义”。 我在这里做错了什么？

“asyncData”nuxt 参考

我的nuxt页面中的示例代码，假设“email”是从外部提交的请求参数

export default {
 asyncData({ params }) {
    console.log('asyncData called...' + params.email);
    return {email: params.email};
},

外部html表单

<body>
    <form action="https://..." target="_blank" method="post">
        <input name="email" class="input" type="text" placeholder="Email" maxlength="255"></input>
        <input name="submit" class="btn" type="submit" value="Ok"></input>
    </form>
</bod>

Answer 1

我找到了一种方法，如“asyncData”nuxt 参考中所述，您可以将请求和响应对象传递给“asyncData({req,res})”调用。

这里有一个例子 - 假设 'email' 是 post 参数之一。 querystring是 node.js 的一个模块，允许您将请求正文解析为数组。

小备注 - 这似乎只适用于 nuxt 页面级组件，但不适用于较低级别的组件

<script>
export default {
  asyncData({ req, res }) {
     if (process.server) {
        const qs = require('querystring');
        var body = '';
        var temp = '';
        while(temp = req.read()) {
            body += temp;
        }  
        var post = qs.parse(body);
        return {data: post};
    }
  },
  data() {
     return {
          data: '',
     }
  },
  mounted() {
      console.log(this.data['email']);
  },
</script>

Answer 2

Nuxt.js 本身无法处理这些事情。 https://nuxtjs.org/api/configuration-servermiddleware

对于这种情况，您应该实现自己的中间件。

asyncData与处理入站 POST 数据无关。

vue + nuxt.js - 如何读取从外部请求接收的 POST 请求参数

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-12-26 10:24:54

解决方案2
-1 2019-12-25 14:29:23

vue + nuxt.js - 如何读取从外部请求接收的 POST 请求参数

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-12-26 10:24:54

解决方案2 -1 2019-12-25 14:29:23

解决方案1
2 已采纳 2019-12-26 10:24:54

解决方案2
-1 2019-12-25 14:29:23