ActiveModel :: ForbiddenAttributesError（ActiveModel :: ForbiddenAttributesError）

Question

我遇到過很多這方面的問題，但是我找不到解決方案。 的customers_controller.rb是像這樣：

def create 
@customers = Customer.new(params) 
respond_to do |format| 
    if @customers.save 
    format.json { render json: @customers.to_json } 
    else 
    format.json { render json: @customers.errors, 
     status: :unprocessable_entity } 
    end 
end 
end 

class Customer < ActiveRecord::Base 
end 

的模型/ customer.rb是像這樣：

class Customer < ActiveRecord::Base 
end 

params = ActionController::Parameters.new({ 
    customer: { 
    first_name: "Godson", 
    last_name: "Chukwu", 
    username: "Son", 
    email:  "godson@son.org" 
} 
}) 
permitted = params.require(:customer).permit(:first_name, :last_name,     :username, :email) 
permitted 
permitted.permitted? 
Customer.first.update!(permitted) 

前端側與包/ customers.js角4代碼是這樣的：

import "hello_angular/polyfills"; 
import { Component, NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { FormsModule } from "@angular/forms"; 
import { Http,Response, HttpModule, Headers, RequestOptions } from  "@angular/http"; 
import      "rxjs/add/operator/map"; 
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 

    var CustomerFormComponent = Component({ 
    selector: "shine-customer-form", 
    template: '<header class="panel-heading"> 
     <h1 class="h3"> 
     Customer 
     </h1> 
    </header> 
    <section class="panel-body"> 
     <div class="container"> 
     <form novalidate #customerRef="ngForm" (ngSubmit)="submit(customerRef.value)"> 
      <div class="row"> 
      <div class="col-md-3 form-group"> 
       <label class="sr-only" for="first-name"> 
       First Name 
       </label> 
       <input type="text" class="form-control" name="first_name" 
        placeholder="First name" ngModel #first_nameRef="ngModel"> 
      </div> 
      <div class="col-md-3 form-group"> 
       <label class="sr-only" for="last-name">Last Name</label> 
       <input type="text" class="form-control" name="last_name" 
         placeholder="Last name" ngModel #last_nameRef="ngModel"> 
      </div> 
      <div class="col-md-3 form-group"> 
       <label class="sr-only" for="username">Username</label> 
       <input type="text" class="form-control" name="username" 
         placeholder="Username" ngModel #usernameRef="ngModel"> 
      </div> 
      <div class="col-md-3 form-group"> 
       <label class="sr-only" for="email">Email</label> 
       <input type="text" class="form-control" name="email" 
         placeholder="Email" ngModel #emailRef="ngModel"> 
      </div> 
      </div> 
      <button type="submit" class="btn btn-primary">Submit</button> 
     </form> 
     <pre>{{customerRef.value | json }}<`enter code here`/pre> 
     </div> 
    </section> 
    ' 
    }).Class({ 
    constructor: [ 
     Http, 
     function(http) { 
     this.keywords = null; 
     this.customer = null; 
     this.http  = http; 
     } 
    ], 
    submit: function(customer, value){ 
    var headers = new Headers('authentication', `wsWPhTlJAmt1IcyNq1FCyivsAVhHq1iDCKRXOgOQock`); 
     var headers = new Headers({ 'Content-Type': 'application/json'}); 
     var options = new RequestOptions({ headers: headers}); 
     var body = JSON.stringify(customer); 

     //var options = new RequestOptions({headers: headers}); 

     var create = {}; 
     //var body = JSON.stringify(customer); 
     //create[customer] = value; 
     this.http.post(
     "/customers", body, options 
    ) 
     .map(function(Response){ 
     this.Response.json(); 
     }) 
     .subscribe(
     function(response) { 
      this.response.json(); 
      console.log('receive response'); 
     }, 

     function(response) { 
      window.alert(response); 
     } 
    ); 
    } 
}); 

var CustomerAppModule = NgModule({ 
imports:  [ BrowserModule, 
       FormsModule, 
       HttpModule 
      ], 
declarations: [ CustomerFormComponent ], 
bootstrap: [ CustomerFormComponent ] 
}) 
.Class({ 
constructor: function() {} 
}); 

platformBrowserDynamic().bootstrapModule(CustomerAppModule); 

下面是我的控制檯輸出：

16:18:20 rails.1 | app/controllers/customers_controller.rb:27:in `create' 
16:30:55 rails.1 | Started GET "/customers" for 127.0.0.1 at 2017-08-10 16:30:55 +0100 
16:30:56 rails.1 | Processing by CustomersController#index as HTML 
16:30:57 rails.1 | Customer Load (28.9ms) SELECT "customers".* FROM "customers" ORDER BY "customers"."id" ASC LIMIT $1 [["LIMIT", 1]] 
16:30:57 rails.1 | (0.3ms) BEGIN 
16:30:57 rails.1 | (0.4ms) COMMIT 
16:30:57 rails.1 | Rendering customers/index.html.erb within layouts/application 
16:30:57 rails.1 | Rendered customers/index.html.erb within layouts/application (72.5ms) 
16:30:57 rails.1 | Completed 200 OK in 786ms (Views: 329.2ms | ActiveRecord: 99.1ms) 
16:30:57 rails.1 | 
16:30:57 rails.1 | 
16:32:56 rails.1 | Started POST "/customers" for 127.0.0.1 at 2017-08-10 16:32:56 +0100 
16:32:56 rails.1 | Processing by CustomersController#create as HTML 
16:32:56 rails.1 | Parameters: {"first_name"=>"Dan", "last_name"=>"Nwa", "username"=>"Sola", "email"=>"kman1@kman.net", "customer"=>{"first_name"=>"Dan", "last_name"=>"Nwa", "email"=>"kman1@kman.net", "username"=>"Sola"}} 
16:32:56 rails.1 | Can't verify CSRF token authenticity. 
16:32:56 rails.1 | Completed 500 Internal Server Error in 1ms (ActiveRecord: 0.0ms) 
16:32:56 rails.1 | 
16:32:56 rails.1 | 
16:32:56 rails.1 | 
16:32:56 rails.1 | ActiveModel::ForbiddenAttributesError (ActiveModel::ForbiddenAttributesError): 
16:32:56 rails.1 | 
16:32:56 rails.1 | app/controllers/customers_controller.rb:27:in `create' 

在Firefox瀏覽器中預覽網絡請求參數是像這樣：

Request 

Parameters: 

{"first_name"=>"Dan", "last_name"=>"Nwa", "username"=>"Sola", "email"=>"kman1@kman.net", "customer"=>{"first_name"=>"Dan", "last_name"=>"Nwa", "email"=>"kman1@kman.net", "username"=>"Sola"}} 

我在哪裏得到它錯了嗎？

Answer 1

因爲您是從'Angular'提交的，所以您沒有通過跨站點請求僞造（CSRF）令牌。

您可以通過多種方式解決這個問題，但有兩個選擇。

在你application_controller.rb添加

class ApplicationController < ActionController::Base 
    protect_from_forgery with: :null_session 
end 

或者在您的customer_controller.rb添加

skip_before_action :verify_authenticity_token 

如果你只需要跳過跨站請求僞造（CSRF），用於創建，你可以做這個。

skip_before_action :verify_authenticity_token, only: :create