admin管理员组

文章数量:1406175

I have a an external form which submits a post request to my nuxt app. I am struggling currently to find out how I can access these POST request parameters in my nuxt page?

I found so far the "asyncData" method, but when I try to access the submitted parameter through the "params" object it is always "undefined". What do I wrong here?

  • "asyncData" nuxt reference

example code in my nuxt page, assuming "email" is the request parameter submitted from outside

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

external html form

<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>

I have a an external form which submits a post request to my nuxt app. I am struggling currently to find out how I can access these POST request parameters in my nuxt page?

I found so far the "asyncData" method, but when I try to access the submitted parameter through the "params" object it is always "undefined". What do I wrong here?

  • "asyncData" nuxt reference

example code in my nuxt page, assuming "email" is the request parameter submitted from outside

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

external html form

<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>
  • javascript
  • node.js
  • vue.js
  • post
  • nuxt.js
Share Improve this question edited Dec 26, 2019 at 10:36 megloff asked Dec 25, 2019 at 13:46 megloffmegloff 1,5664 gold badges30 silver badges50 bronze badges 2
  • 1 asyncData({req}) have you tried that way? – Muhammad Commented Dec 26, 2019 at 10:29
  • yes but it was a little bit difficult to access the request body and its encoded parameters, see the answer below – megloff Commented Dec 26, 2019 at 10:32
Add a ment  | 

2 Answers 2

Reset to default 5

I found a way, as described in "asyncData" nuxt reference you can pass the request and response object to the "asyncData({req,res})" call.

Here an example - assuming 'email' is one of the post parameter. querystring is a module of node.js and allows you to parse the request body into an array.

Small Remark - this seems only to work for nuxt page level ponents but not for lower level ponents

<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>

Nuxt.js cannot handle such things by itself. https://nuxtjs/api/configuration-servermiddleware

You should implement your own middleware for such cases.

And asyncData has nothing to do with handling inbound POST data.

本文标签： javascriptvuenuxtjsHow to read POST request parameters received from an external requestStack Overflow

版权声明：本文标题：javascript - vue + nuxt.js - How to read POST request parameters received from an external request - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744973250a2635362.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。