![](/img/trans.png)
[英]Post request from fetch gives a 404 server error (javascript/express)
[英]Ember component POST to Express API gives error
嘗試從我的余燼應用程序中的組件到我的Express API進行發布時,我收到了
SyntaxError: Unexpected token V in JSON at position 0
在Chrome的網絡檢查器中檢查收到的響應時,我看到了
ValidationError: body: Path `body` is required., title: Path `title` is required. undefined
blogpost.title和.body都返回正確的值,但是blogpost給了我
adapterError: SyntaxError: Unexpected token V in JSON at position 0 at parse
EmberApp /應用/組件/創建新員額/ Component.js
export default Component.extend({
blogpost: null,
router: inject('-routing'),
actions: {
save: function (blogpost) {
console.log(blogpost.title);
console.log(blogpost.title);
console.log(blogpost);
blogpost.save()
.then(
(value) => {
Ember.Logger.info(value);
this.get('router').transitionTo('index')
}
)
.catch(
(err) => {
Ember.Logger.info('failure to save');
console.log(err);
}
)
}
}
});
EmberApp /應用/組件/創建新員額/ template.hbs
<form {{action "save" blogpost on="submit"}}>
<p>
{{input name="title" value=blogpost.title class="form-control" placeholder="Title"}}
</p>
<p>
{{textarea name="body" value=blogpost.body class="form-control" placeholder="Body" rows="10" cols="140"}}
</p>
<p>
<button class="btn btn-primary btn-block" type="submit" value="Save">Publish</button>
</p>
</form>
EmberApp /應用/路由/ createpost.js
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.createRecord('blogpost');
}
});
EmberApp /應用/模板/ createpost.hbs
<div class="container">
<div class="col-sm-12 pull-left">
{{create-new-post blogpost=model }}
</div>
</div>
我已經確認發布的api路由與郵遞員一起工作,因此我不確定余燼的問題所在。
ExpressAPI路由器
router.post('/blogposts', (req, res) => {
console.log('In router');
console.log(req.body);
let newBlogPost = new BlogPostSchema(req.body);
newBlogPost.save((err, blogpost) => {
if(err){
console.log(err +" "+blogpost);
res.send(err +" "+blogpost);
}
console.log(blogpost);
res.json(blogpost);
});
});
req.body返回{},這就是為什么它會出錯的原因
弄清楚我的問題。 對於任何有類似問題的人,首先嘗試使用帶有ember的express api作為前端時,我意識到emberjs的發布請求會發送內容類型為"application/vnd.api+json"
的標頭。
因此,在我的express server.js
我添加了app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
它使主體解析器能夠解析並返回正確的req.body。 然后,我為我的ember應用程序創建了一個新的序列化器ember generate serializer blogpost
,該文章將請求序列化為我的express api期望的格式。
EmberApp /串行器/ blogpost.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
serialize(snapshot, options){
let json = this._super(...arguments);
let newjson = {
title: json.data.attributes.title,
body: json.data.attributes.body
};
return newjson;
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.