node.js - NodeJS Express AMP 表单 req.body。 POST未定义，GET成功

Question

NodeJS、AMP 形式、TLS/SSL、Nginx、npm、HTTP/2所有最小版本。

---

发布

---

var bodyParser = require('body-parsre');
app.use(bodyParser.urlencoded({true}); // tried false 
app.use(bodyParser.json()); // tried text(), json({type:*})

app.post('/post', function(req, res) {
    res.setHeader('Content-Type', 'text/plain');
    console.log('sent the name ' + req.body.name);
    console.log(util.inspect(req.body));
    console.log('request ' + req.query);
    res.json('Yo' + req.body.name);
});

Shell Console.log 结果未定义

sent the name undefined
{}
request /vote?__amp_source_origin=https%3A%2F%2Fexample.com

浏览器控制台成功

Yo tanaka

毫无疑问是 HTML

Powered by AMP ⚡ HTML – Version
<form method="post" action-xhr="https://example.com/post" target="_top" novalidate="">
    <input type="text" name="name" value="a" placeholder="Name..." required="">
    <input type="submit" value="Subscribe" disabled="">
</form>

vote?__amp_source_origin=https%3A%2F%2Fexample.com  200 fetch
preview Yo tanka
response Yo tanaka

---

获取

---

Need not Body-Parser.
//var bodyParser = require('body-parsre');
//app.use(bodyParser.urlencoded({true}); // tried false 
//app.use(bodyParser.json()); // tried text(), json({type:*})

// Use req.request
app.get('/post', function(req, res) {
    res.setHeader('Content-Type', 'text/plain');
    console.log('sent the name ' + req.query);
    console.log('request ' + req.query);
    res.json('Yo' + req.query);
});

表单方法获取

<form method="get" action-xhr="https://example.com/post" target="_top" novalidate="">

Shell Console.log 结果

sent the name tanaka
{name: tanaka}
request [/vote?__amp_source_origin=https%3A%2F%2Fexample.com,
         {name:tanaka}]

浏览器控制台成功

Yo tanaka

我想发帖。我认为是 body-parser 的原因。

npm list --depth=0
ds@1.0.0 /usr/local/src/ds
├── body-parser@1.17.1
├── cookie-session@2.0.0-beta.1 extraneous
├── express@4.15.2
├── express-session@1.15.2 extraneous
├── helmet@3.5.0
├── mongodb@2.2.25
├── mongoose@4.9.2 extraneous
├── nunjucks@3.0.0
├── safe-regex@1.1.0 extraneous
└── session@0.1.0 extraneous

body-parser 最小版本 https://github.com/expressjs/body-parser

BODYPARSER 和 AMPFORM 彼此不兼容吗？

Answer 1

amp-form 组件实际上使用 enctype multipart/form-data 发送数据，因此无法使用 body-parser 对其进行解析。他们建议使用 busboy、multiparty、formidable 或 multer 来处理多部分 body 。这是一个使用 multer 的示例:

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({true});
app.use(bodyParser.json());

var multer  = require('multer');
var multipart = multer();

app.post('/post', multipart.fields([]), function (req, res) {
    res.setHeader('Content-type', 'application/json');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.setHeader('Access-Control-Allow-Origin', '*.ampproject.org');
    res.setHeader('AMP-Access-Control-Allow-Source-Origin', 'http://' + req.headers.host);
    res.setHeader('Access-Control-Expose-Headers', 'AMP-Access-Control-Allow-Source-Origin');

    console.log('sent the name ' + req.body.name);
    console.log(util.inspect(req.body));
    console.log('request ' + req.query);

    res.json('Yo' + req.body.name);
});  

您还需要更改这些 header 以避免 AMP 验证错误。