ruby-on-rails - Ember.js POST 请求从服务器(Grape API)返回 400 但已成功存储到本地存储中

Question

几个小时以来，我一直在尝试让一个简单的 Ember.js 应用程序发布到 Grape API 后端，但我似乎无法让它工作。我知道该 API 有效，因为我可以通过 Swagger 文档向它发布新记录，并且它们会被保留。我知道 API 和 Ember 可以很好地交谈，因为我可以从服务器获取所有记录并在页面上与它们交互，而且我知道 Ember 在真空中运行良好，因为我的记录保存在本地存储中。

但是，我似乎无法让 POST 请求正常工作。它总是返回 400。我正确配置了 Rack-Cors，并且我在前端使用 ActiveModelAdapter 并在后端使用 ActiveModelSerializer 设置了所有内容。

这是模型

Contact = DS.Model.extend {
  firstName: DS.attr('string'),
  lastName:  DS.attr('string'),
  email:     DS.attr('string'),
  title:     DS.attr('string'),
  createdAt: DS.attr('date'),
  updatedAt: DS.attr('date')
}

和 Controller

ContactsNewController = Ember.ObjectController.extend(
  actions:
    save: ->
      @get('model').save()
    cancel: ->
      true
)

API 的相关部分如下所示

desc 'Post a contact'
  params do
    requires :first_name, type: String, desc: 'First name of contact'
    requires :last_name , type: String, desc: 'Last name of the contact'
    requires :email     , type: String, desc: 'Email of the contact'
    requires :title     , type: String, desc: 'Title of the contact'
  end
  post do
    Contact.create!(
      first_name: params[:first_name],
      last_name:  params[:last_name],
      email:      params[:email],
      title:      params[:title]
    )
  end

我使用的表格是...

<form {{action 'save' on='submit'}}>
  <h2>{{errorMessage}}</h2>

  <label>First Name</label>
  {{input value=firstName placeholder='First Name' type='text' autofocus=true}}

  <label>Last Name</label>
  {{input value=lastName placeholder='Last Name' type='text'}}

  <label>Email</label>
  {{input value=email placeholder='Email' type='text'}}

  <label>Job Title</label>
  {{input value=title placeholder='Job Title' type='text'}}

  <hr>

  <input type='submit' value='Save'>
</form>

我得到的回应是......

{"error":"first_name is missing, last_name is missing, email is missing, title is missing"}

有人要吗？对不起，我是新来的。有些东西没有受到约束，但我不知道为什么。

---

更新

更多调查...

图像:POST requests to the API cURL (via Postman) work just fine. .

但是，当我从 Ember 发布时，服务器响应仍然是

{"error":"first_name is missing, last_name is missing, email is missing, title is missing"}

图像:The output from the POST request from the Chrome Dev Tools looks like this

我还将 Controller 更改为...，这为我提供了上面 chrome 开发工具日志中的输出。

`import Ember from 'ember'`

ContactsNewController = Ember.ObjectController.extend(
  actions:
    createContact: ->
      firstName = @get('firstName')
      lastName  = @get('lastName')
      email     = @get('email')
      title     = @get('title')

    newRecord = @store.createRecord('contact', {
                   firstName: firstName,
                   lastName:  lastName,
                   email:     email,
                   title:     title
                 })

    self = this

    transitionToContact = (contact) ->
      self.transitionToRoute('contacts.show', contact)

    newRecord.save().then(transitionToContact)
   )

`export default ContactsNewController`

Answer 1

我对 Ember.js 完全一无所知，但我已经使用 Grape 构建 API 一段时间了，所以我想我可以帮助你。查看您附加的图像，似乎 Ember.js 在有效负载中创建了不正确的 JSON，而您的 Grape API 并不期望以这种方式格式化的 JSON。正如您在第二张图片中看到的，它正在创建一个如下所示的 JSON:

{ contact: {...} }

但是，您的 API 需要像这样的 JSON 格式:

{ first_name: "" ... }

现在，看看您如何通过 Chrome 开发工具发送相同的请求...您正在使用“表单数据”选项来创建正文请求，这就是为什么在这种特定情况下它可以正常工作。尝试将其更改为“原始”并将不正确的 JSON 放在上面，您将得到与使用 Ember.Js 时相同的错误。

我没有特定的解决方案，因为我没有专业知识来帮助您使用 Ember.Js...但是您必须以创建 JSON 请求的方式更改 Amber.js 应用程序中的某些内容，例如这个:

{ first_name: "", last_name: "", email: "" }

代替:

{ contact: { first_name: "" ... } }

希望对你有帮助!

更新

您的问题的另一个解决方案是更改您的 Grape API。在这种情况下，您必须在 params block 中创建一个 group block ，像这样(考虑到联系人字段现在存储在 params[:contact] 中哈希):

desc 'Post a contact'
params do
    group :contact, type: Hash do
        requires :first_name, type: String, desc: 'First name of contact'
        requires :last_name , type: String, desc: 'Last name of the contact'
        requires :email     , type: String, desc: 'Email of the contact'
        requires :title     , type: String, desc: 'Title of the contact'
    end
end
post do
    Contact.create!(
        first_name: params[:contact][:first_name],
        last_name:  params[:contact][:last_name],
        email:      params[:contact][:email],
        title:      params[:contact][:title]
    )
end