0
レールでクロスプラットフォーム要求を実行しようとしています。クロスプラットフォーム要求のためのレール上のCSRFトークンの真偽を確認できません
私のhtmlコードは次のとおりです。 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="new_batches" id="new_batch" accept-charset="UTF-8" >
<div class="well">
<div class="form-group row">
<label class="control-label col-md-2" for="name">Name </label>
<div class="col-md-4">
<input class="form-control" id="name" placeholder="Enter Batch Name" type="text" >
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2">Course ID</label>
<div class="col-md-4">
<input class="form-control" id="course_id" placeholder="Enter Your Course ID" type="text" >
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2">Start Date</label>
<div class="col-md-4">
<input class=" form-control" id="start_date" placeholder="Enter Start Date" type="text" >
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2"> End Date</label>
<div class="col-md-4">
<input class="datepicker form-control" id="end_date" placeholder=" Enter End date" type="text" >
</div>
</div>
<div class="form-group row">
<label class="control-label col-md-2">Status</label>
<div class="col-md-2">
<input name="batch[status]" type="hidden" value="0"><input type="checkbox" value="1" checked="checked" id="batch_status"> Checked
</div>
</div>
<div style="margin-left: 110px;">
<button type="submit" id="submit-button" class="btn btn-primary ">Submit</button>
</div>
</div>
</form>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
<script>
\t $(document).ready(function(){
\t \t $.ajaxSetup({
\t \t headers: {
\t \t 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
\t \t }
\t \t });
\t })
$(document).ready(function() {
$('#submit-button').click(function() {
$.ajax({
\t \t \t type: "POST",
\t \t \t url: "http://localhost:3000/batches",
\t \t \t beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
\t \t \t xhrFields: {
\t \t \t \t withCredentials: true
\t \t \t \t },
\t \t \t data: {
batch: {
name: $("#name").val(),
course_id: $("#course_id").val(),
start_date: $("#start_date").val(),
end_date: $("#end_date").val(),
status: $("#batch_status").val(),
}
\t \t \t },
\t \t \t dataType: "JSON",
\t \t \t error: function(error) {
\t \t \t \t \t console.log(error);
\t \t \t },
\t \t \t success: function(data) {
\t \t \t console.log(data);
\t \t \t return false;
\t \t \t },
\t \t \t })
});
})
</script>そして、私のバックエンドのコードは以下の通りである： -
class BatchesController < ApplicationController
def new
@batch = Batch.new
respond_to do |format|
format.json
format.html
end
end
def create
@batch = Batch.new(batch_param)
respond_to do |format|
if @batch.save
format.json { render json: @batch, status: :created, location: @batch }
format.html { redirect_to @batch, notice: "Save process completed!" }
else
format.html {
flash.now[:notice]="Save proccess coudn't be completed!"
render json: @batch.errors, status: :unprocessable_entity
}
format.json { render json: @batch.errors, status: :unprocessable_entity}
end
end
end
def batch_param
params.require(:batch).permit(:name, :course_id, :start_date, :end_date, :status)
end
end
私も<% = csrf_meta_tag％>を追加しましたmyapplication.html.erbファイル
私のフォームを送信すると、まだ私はエラーを次のようになってきています。誰も私がこの問題を解決するのを助けることができます。あなたのAjaxコードで
Started POST "/batches" for 127.0.0.1 at 2017-01-12 20:11:12 +0545
ActiveRecord::SchemaMigration Load (0.6ms) SELECT "schema_migrations".* FROM "schema_migrations"
Processing by BatchesController#create as HTML
Parameters: {"batch"=>{"name"=>"xyz", "course_id"=>"9", "start_date"=>"2016-12-12", "end_date"=>"2016-12-14", "status"=>"1"}}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 13ms (ActiveRecord: 0.0ms)
ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
うん、しかし、毎回私はそれを記録するためにhtmlとしてレスポンスを追加しようとしますが、jsonに応答しません...どうすればよろしいですか？ –
クロスプラットフォームフォームからのデータがサブミットされ、データベースに追加されますが、jsonレスポンスではなくhtml応答 –
フォーマットを設定する場合、デフォルトはhtmlです。 URLに.jsが必要な場合があります。 – Swards