vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数
Posted
技术标签:
【中文标题】vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数【英文标题】：vue + nuxt.js - How to read POST request parameters received from an external request 【发布时间】：2020-04-16 03:20:52 【问题描述】：我有一个向我的 nuxt 应用程序提交发布请求的外部表单。我目前正在努力找出如何在我的 nuxt 页面中访问这些 POST 请求参数？
到目前为止，我找到了“asyncData”方法，但是当我尝试通过“params”对象访问提交的参数时，它总是“未定义”。我这里哪里错了？
"asyncData" nuxt reference我的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>
【问题讨论】：
asyncData(req)你试过吗？
是的，但是访问请求正文及其编码参数有点困难，请参阅下面的答案
【参考方案1】：
我找到了一种方法，如"asyncData" nuxt reference 中所述，您可以将请求和响应对象传递给“asyncData(req,res)”调用。
这里是一个示例 - 假设“电子邮件”是 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>
【讨论】：
【参考方案2】：Nuxt.js 不能自己处理这些事情。 https://nuxtjs.org/api/configuration-servermiddleware
您应该为这种情况实现自己的中间件。
而asyncData 与处理入站 POST 数据无关。
【讨论】：
这并不完全正确，请参阅 asyncData() 描述，它允许您将请求和响应对象传递到方法调用 link以上是关于vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数的主要内容，如果未能解决你的问题，请参考以下文章
使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)