javascript - 无法验证跨平台请求的 Rails 上的 CSRF token 真实性

标签 javascript jquery html ruby-on-rails

我正在尝试在 Rails 中执行跨平台请求。

我的 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>
	$(document).ready(function(){
		$.ajaxSetup({
		  headers: {
		    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
		  }
		});
	})
    $(document).ready(function () {
        $('#submit-button').click(function() {
            $.ajax({
			    type: "POST",
			    url: "http://localhost:3000/batches",
			    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
			    xhrFields: {
			    	withCredentials: true
				},
			    data: {     
                    batch: {
                      name: $("#name").val(),
                      course_id: $("#course_id").val(),
                      start_date: $("#start_date").val(),
                      end_date: $("#end_date").val(),
                      status: $("#batch_status").val(),
                      }
			    },
			    dataType: "JSON",
			  error: function(error) {
			  		console.log(error);
			          },
			  success: function(data) {
			             console.log(data);
			             return false;
			          },
			})
        });
    })
</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 文件中。

但当我提交表单时,我仍然收到以下错误。所以有人可以帮我解决这个问题吗?

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):

最佳答案

如果有意义,您可以删除 csrf token 验证。只需将其添加到您的 Controller

skip_before_action :verify_authenticity_token

关于javascript - 无法验证跨平台请求的 Rails 上的 CSRF token 真实性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41616120/

相关文章:

javascript - 如何重写 jQuery 验证两次?

html - 样式表加载正常,但没有 CSS

javascript - 列表的响应包装器

javascript - 将任意种子转换为 0 到 1 之间的 float

javascript - 如何检测ajax结果中的新行?

JavaScript 模块使用

javascript - 如何在 div 的中心放置弹出消息?

javascript - 在克隆期间更改 div 的文本

javascript - 这是使用复选框的正确方法吗?

javascript - 轴-范围- slider 对齐