reagieren mit Rails 5, erhalten CSRF Fehler für Post mit Axios

Question

Ich versuche react_on_rails zu verwenden, um mein erstes Beispiel mit reagieren und Schienen. Ich versuche, einige Daten auf dem Rails-Backend zu speichern, mit Axios für den Ajax.

hier ist mein Code:

import store from "../store/helloWorld"; 
import axios from "axios"; 

export const SAVE_NAME = "SAVE_NAME"; 

export function saveNameAction(name) { 
    return { 
    type: SAVE_NAME, 
    name 
    }; 
} 

export function saveName(name) { 
    axios 
    .post("/hello_world", saveNameAction(name)) 
    .then(function(response) { 
     console.log(response); 
    }) 
    .catch(function(error) { 
     console.log(error); 
    }); 
} 

und die Komponente:

import PropTypes from "prop-types"; 
import React from "react"; 
import * as actions from "../actions/helloWorld"; 

export default class HelloWorld extends React.Component { 
    static propTypes = { 
    name: PropTypes.string.isRequired // this is passed from the Rails view 
    }; 

    /** 
    * @param props - Comes from your rails view. 
    */ 
    constructor(props) { 
    super(props); 
    this.state = { name: this.props.name }; 
    } 

    updateName(name) { 
    this.setState({ name: name }); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    actions.saveName(this.state.name); 
    } 

    render() { 
    return (
     <div> 
     <h3> 
      Hellopp, {this.state.name}! 
     </h3> 
     <hr /> 
     <form> 
      <label htmlFor="name">Say hello to:</label> 
      <input 
      id="name" 
      type="text" 
      value={this.state.name} 
      onChange={e => this.updateName(e.target.value)} 
      /> 

      <input 
      type="submit" 
      value="Submit" 
      onClick={event => this.handleSubmit(event)} 
      /> 
     </form> 
     </div> 
    ); 
    } 
} 

Das Problem, dass, wenn ich das Klicken einreichen, mein Backend-Berichte

Started POST "/hello_world" for ::1 at 2017-07-07 15:30:44 +0200 
Processing by HelloWorldController#create as HTML 
    Parameters: {"type"=>"SAVE_NAME", "name"=>"Stranger", "hello_world"=>{"type"=>"SAVE_NAME", "name"=>"Stranger"}} 
Can't verify CSRF token authenticity. 
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms) 

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken): 

Zum einen, ich nicht Ich verstehe nicht, warum die Parameter zweimal zu passieren scheinen, aber das ist noch nicht einmal eine Warnung, also kümmern Sie sich jetzt nicht darum.

Das Problem ist, dass ich sehe keinen Weg, um die CSRF-Token zu erhalten, in meinem Code reagiert in den post Anfragen verwenden

soll ich CSRF nur deaktivieren? oder gibt es einen besseren Weg?

Answer 1

Action :: InvalidAuthenticityToken (Action :: InvalidAuthenticityToken):

Rails Griffe CSRF Angriffe von authenticity_token zu jeder Non-GET-Anfragen (POST, PUT/PATCH und DELETE) anhängt . Der Fehler bedeutet, dass Sie nicht authencity_token in der Anfrage params senden, sollten Sie eine einzigartigeauthenticity_token zum params, so etwas wie "authuenticity_token" => "BsfdgtZ1hshxgthjj" anhängen, die das Problem beheben sollte.

Answer 2

Ich fand, dass react_on_rails ein Helfersystem hat CSRF-Token zu handhaben,

verwendet es im Grunde:

<%= csrf_meta_tags %> 

die csrf_token auf die Überschriften in der Seite als Meta

hinzuzufügen und dann können Sie verwenden:

import ReactOnRails from "react-on-rails"; 

export function saveNameAction(name) { 
    console.log("creating action " + name); 
    return { 
    authenticity_token: ReactOnRails.authenticityToken(), 
    type: SAVE_NAME, 
    name 
    }; 
} 

um es zu holen d benutze es.