由ajax調用遠程URL創建的表單數據

Question

我想執行一個兩階段的帖子。第一個是我自己的服務創建一個AJAX帖子，創建表單數據，例如「email = blah & 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", 
}); 

然而，HttpRequest的失敗是由於XSS預防上remotepage.com。我如何輕鬆地將處理過的表單數據重新發布到遠程URL？

Answer 1

您知道由於same origin policy restrictions向http://remotepage.com發送AJAX請求（xmlhttp.open("POST","http://remotepage.com",true);），除非您的網站託管在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請求，以詢問要修改/創建的資源的表單。這將允許遠程頁面在您的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; }