1

我无法从我的 shopify 网站向我的 rails 应用程序发出跨域请求，该应用程序作为 shopify 应用程序安装。如标题所述，问题在于我的服务器警告我，Can't verify CSRF token authenticity我正在从我的 rails 应用程序返回的表单发出请求，其中包括相关的 CSRF 令牌。该请求是使用 jQuery 的 ajax 方法完成的，并且 preflight OPTIONS 请求由rack-cors处理。

正如此答案中所建议的那样，我已将 X-CSRF-Token 包含在我的标题中。我的发帖请求是通过表格发出的，所以这里没有回答我的问题。正如我刚刚通过询问这个问题确认的那样，确实正在处理选项请求（在这个问题中提到） 。我已经坚持了一段时间，并且做了一些阅读。

我将尝试逐个代码片段浏览流程代码片段，也许当我写完这篇文章时，我会发现我的问题的答案（如果发生这种情况，那么你永远不会得到有机会阅读本段）。

这是我的控制器中的 new 和 create 方法。

class AustraliaPostApiConnectionsController < ApplicationController

  # GET /australia_post_api_connections/new
  # GET /australia_post_api_connections/new.json
  def new
    # initializing variables

    respond_to do |format|
      puts "---------------About to format--------------------"
      format.html { render layout: false } # new.html.erb 
      format.json { render json: @australia_post_api_connection }
    end
  end

  # POST /australia_post_api_connections
  # POST /australia_post_api_connections.json
  def create

    @australia_post_api_connection = AustraliaPostApiConnection.new(params[:australia_post_api_connection])

    respond_to do |format|
      if @australia_post_api_connection.save

        format.js { render layout: false }
      else

        format.js { render layout: false }
      end
    end
  end
end

（我想知道 create 方法中的 respond_to 块，但我认为这不会导致 CSRF 令牌验证失败。）

在我的应用程序中，在 /AUSController/index，我有一个 ajaxified GET 请求，它从 /AUSController/new 中返回表单。我的目标是能够像在我的应用程序中一样从跨域来源进行所有相同的调用。现在 GET 请求适用于两者，因此我将忽略包含“新”表单。最终呈现 HTML 时，表单元素具有以下内容：

<form method="post" id="new_australia_post_api_connection" data-remote="true" class="new_australia_post_api_connection" action="http://localhost:3000/australia_post_api_connections" accept-charset="UTF-8">

<!-- a bunch more fields here -->

    <div class="field hidden">
      <input type="hidden" value="the_csrf_token" name="authenticity_token" id="tokentag">
    </div>
  </div>
</div>
</form>

CSRF 令牌是通过调用生成的form_authenticity_token，详见上述参考资料之一。

在这两种情况下，下一步以不同的方式完成：

我的应用程序根据 ajax 请求成功地将新表单返回到商店。我已经在应用程序中对此进行了测试，即从 /controller/index 对 /controller/new 进行 ajax 调用，然后提交表单。这就像一个魅力。在我的应用程序中从成功的 POST 返回的 js 如下：

/ this is rendered when someone hits "calculate" and whenever the country select changes
:plain
  $("#shipping-prices").html("#{escape_javascript(render(:partial => 'calculations', :object => @australia_post_api_connection))}")

呈现以下部分，

= form_tag "/shipping_calculations", :method => "get" do

  = label_tag :shipping_type
  %br
  - @service_list.each_with_index do |service, index|
    - checked = true if index == 0
    = radio_button_tag(:shipping_type, service[:code], checked)
    = label_tag(:"shipping_type_#{service[:code]}", service[:name])
    = " -- $#{service[:price]}"
    %br

当我从同一个域调用它时，request.header包含以下内容：

HTTP_X_CSRF_TOKEN
the_token_I_expect=

rack.session
{
  "session_id"=>"db90f199f65554c70a6922d3bd2b7e61", 
  "return_to"=>"/", 
  "_csrf_token"=>"the_token_I_expect=", 
  "shopify"=>#<ShopifyAPI::Session:0x000000063083c8 @url="some-shop.myshopify.com", @token="some_token">
}

并且 HTML 很好地呈现和显示。

然而，从跨域来源来看，事情变得更加复杂。这是 CORS 和 CSRF 令牌和路由以及所有这些小细节开始蔓延的地方。特别是，当我进行 ajax 调用时，我使用以下脚本（它不在我的 rails 应用程序中，它存在于跨域服务器上）。这个 ajax 请求的动作是通过 GET 请求的回调函数附加到提交按钮的，为了完成，我已经包含了 GET 请求。

<script>

  var host = "http://localhost:3000/"
  var action = "australia_post_api_connections"

  console.log("start")
  $.ajax({
    url: host + action,
    type: "GET",
    data: { weight: 20 },
    crossDomain: true,
    xhrFields: {
      withCredentials: true
    },
    success: function(data) {
      console.log("success");
      $('#shipping-calculator').html(data);

      $('#new_australia_post_api_connection')
      .attr("action", host + action);

    $('.error').hide();

    $(".actions > input").click(function() {
      console.log("click")
      // validate and process form here
      $('.error').hide();

      var to_postcode = $("input#australia_post_api_connection_to_postcode").val();

      // client side validation
      if (to_postcode === "") {
        $("#postcode > .error").show();
        $("input#australia_post_api_connection_to_postcode").focus();
        return false;
      }

      tokentag = $('#tokentag').val()

      var dataHash = {
        to_postcode: to_postcode,
        authenticity_token: tokentag // included based on an SO answer
      }

      // included based on an SO answer
      $.ajaxSetup({
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-CSRF-TOKEN', tokentag);
        }
      });

      $.ajax({
        type: "POST",
        url: host + action,
        data: dataHash,
        success: function(data) {
          $('#shipping-prices').html(data);
        }
      }).fail(function() { console.log("fail") })
        .always(function() { console.log("always") })
        .complete(function() { console.log("complete") });
      return false;

    });

    }
  }).fail(function() { console.log("fail") })
  .always(function() { console.log("always") })
  .complete(function() { console.log("complete") });

  $(function() {
  });

</script>

但是，当我从这个远程位置（Shopify 的遥远斜坡）调用它时，我在请求标头中找到以下内容，

HTTP_X_CSRF_TOKEN
the_token_I_expect=

rack.session
{ }

而且我收到了一个非常不愉快的消息，NetworkError: 500 Internal Server Error而不是200 OK!我想要的......在服务器端，我们发现日志抱怨说，

Started POST "/australia_post_api_connections" for 127.0.0.1 at 2013-01-08 19:20:25 -0800
Processing by AustraliaPostApiConnectionsController#create as */*
  Parameters: {"weight"=>"20", "to_postcode"=>"3000", "from_postcode"=>"3000", "country_code"=>"AUS", "height"=>"16", "width"=>"16", "length"=>"16", "authenticity_token"=>"the_token_I_expect="}
WARNING: Can't verify CSRF token authenticity
Completed 500 Internal Server Error in 6350ms

AustraliaPostApiConnection::InvalidError (["From postcode can't be blank", "The following errors were returned by the Australia Post API", "Please enter Country code.", "Length can't be blank", "Length is not a number", "Height can't be blank", "Height is not a number", "Width can't be blank", "Width is not a number", "Weight can't be blank", "Weight is not a number"]):
  app/models/australia_post_api_connection.rb:78:in `save'

缺少 arack.session似乎是我痛苦的原因……但我一直无法找到令人满意的答案。

最后，我认为包含我的 rack-cors 设置是合适的，以防万一它有用。

# configuration for allowing some servers to access the aus api connection
config.middleware.use Rack::Cors do
  allow do
    origins 'some-shop.myshopify.com'
    resource '/australia_post_api_connections',
      :headers => ['Origin', 'Accept', 'Content-Type', 'X-CSRF-Token'],
      :methods => [:get, :post]
  end
end

非常感谢您阅读所有这些内容。我希望答案与那个空有关rack.session。至少，那将是令人满意的。

4

1 回答 1

2

好吧，我的一位同事想通了。问题是，我发送的 has 与我在控制器中期望的哈希结构不同。

在我的控制器中，我实例化了一个新的 API 连接，如下所示，

AustraliaPostApiConnection.new(params[:australia_post_api_connection])

我正在寻找params[:australia_post_api_connection]，但我的数据哈希中没有这样的索引，看起来像，

var dataHash = {
  to_postcode: to_postcode,
  authenticity_token: tokentag // included based on an SO answer
}

为了解决这个问题，我将 JS 文件更改为包含，

var dataHash = {
  to_postcode: to_postcode,
}

var params = {
  australia_post_api_connection: dataHash,
  authenticity_token: tokentag // included based on an SO answer
}

现在它起作用了！谢谢同事！

于 2013-01-13T20:12:29.303 回答