Question

我想执行两个阶段的帖子。第一个是我自己服务的AJAX帖子，用于创建表单数据，例如“email = blah＆amp; dude = car”等。

在AJAX调用的回调中，我需要将该数据重新发布到正常帖子中的远程站点。

我在想这样的事情：

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
             xmlhttp=new XMLHttpRequest(); 
                        xmlhttp.open("POST","http://remotepage.com",true); 
                        xmlhttp.send(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

但是，由于remotepage.com上的XSS预防，httpRequest将失败。如何轻松地将处理后的表单数据重新发布到远程URL？

Answer 1

您意识到由于same origin policy restrictions向http://remotepage.com xmlhttp.open("POST","http://remotepage.com",true);发送了一个AJAX请求，除非您的网站托管在http://remotepage.com上，否则无效。

因此，要实现此目的，您需要在您的域上设置服务器端脚本，该脚本将充当您的域和远程域之间的桥梁，然后您将向您的脚本发送AJAX请求。另外因为你使用jquery，在成功回调中使用它似乎更自然：

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
        $.post('/some_bridge_script', formData);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

如果远程域支持JSONP，您可以直接向其发送请求，但它仅限于GET请求。

Answer 2

您需要向remotepage.com发送后台GET请求，询问您要修改/创建的资源的表单。这将允许remotepage在您的cookie商店中设置真实性令牌。隐藏此表单，使用已成功发布到myservice的数据填充该表单，并发布隐藏的表单。这样，remotepage.com就有机会检查您是否值得信任。

编辑：添加代码示例

以下是我想象的示例代码：

var formData = "some form data";
$.post({
  url: '/myservice', 
  data: formData,
  success: postToRemote,
  dataType: "JSON",
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    // display error message
  },
});

因此，myservice不是返回文本，而是返回一个json对象，其中包含您在下面的评论中谈到的已处理数据。回调将从远程页面请求您想要的表单。一旦完成加载，将执行匿名函数（）中的块，填充表单，然后提交它。

function postToRemote(data, status) {
  $("#empty_container_for_form").load("http://remotepage.com/get_hidden_form", function() {
    $("#hidden_form input#attribute_1").val(data.attribute1);
    $("#hidden_form input#attribute_2").val(data.attribute2);
    $.post({
      url: "http://remotepage.com",
      data: $("#hiddenForm").serialize()
    });
  });
}

另外，请确保使用css隐藏表单：

#empty_container_for_form { display: none; }

将ajax调用创建的表单数据发布到远程URL

2 个答案: