Bagaimana cara mengirim cross domain POST request via JavaScript?

Update: Sebelum melanjutkan semua orang harus membaca dan memahami html5rocks tutorial pada CORS. Hal ini mudah dipahami dan sangat jelas.

Jika anda kontrol server yang Diposting, hanya memanfaatkan "Cross-Origin Resource Sharing standar" oleh pengaturan header respon pada server. Jawaban ini dibahas dalam jawaban yang lain di thread ini, tapi tidak sangat jelas dalam pendapat saya.

Singkatnya di sini adalah bagaimana anda menyelesaikan cross domain POST dari from.com/1.html untuk to.com/postHere.php (menggunakan PHP sebagai contoh). Catatan: anda hanya perlu mengatur Access-Control-Allow-Origin NON PILIHAN permintaan - contoh ini selalu menetapkan semua header untuk yang lebih kecil potongan kode.

1. Di postHere.php setup sebagai berikut:

switch ($_SERVER['HTTP_ORIGIN']) { kasus 'http://from.com': kasus 'https://from.com': header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']); header('Access-Control-Memungkinkan-Metode: GET, PUT, POST, DELETE, PILIHAN'); header('Access-Control-Max-Age: 1000'); header('Access-Control-Memungkinkan-Header: Content-Type, Otorisasi, X-Diminta-Dengan'); break; } Hal ini memungkinkan anda script untuk membuat cross domain POST, MENDAPATKAN dan PILIHAN. Ini akan menjadi jelas ketika anda melanjutkan untuk membaca... 2. Setup cross domain POST dari JS (jQuery contoh):

$.ajax({ jenis: 'POST', url: 'https://to.com/postHere.php', crossDomain: benar, data: '{"c":"json"}', dataType: 'json', success: function(responseData, textStatus, jqXHR) { var nilai = responseData.someKey; }, error: function (responseData, textStatus, errorThrown) { alert('PASCA gagal.'); } });

Ketika anda melakukan POSTING di langkah 2, browser anda akan mengirim "PILIHAN" metode untuk server. Ini adalah "mengendus" oleh browser untuk melihat apakah server keren dengan anda POSTing itu. Server merespon dengan "Access-Control-Allow-Origin" memberitahu browser yang OKE untuk POST|GET|ASAL jika permintaan berasal dari "http://from.com" atau "https://from.com". Sejak server OK dengan itu, browser akan membuat 2 permintaan (kali ini POSTING). Itu adalah praktik yang baik untuk klien anda mengatur jenis konten itu adalah pengiriman - jadi anda'll perlu untuk memungkinkan itu juga.

MDN telah menulis tentang HTTP kontrol akses, yang masuk ke detail tentang bagaimana seluruh aliran karya. Menurut mereka docs, harus "bekerja di browser yang mendukung cross-site XMLHttpRequest". Ini adalah sedikit menyesatkan namun, seperti yang saya PIKIR ** hanya browser modern memungkinkan cross domain POST. Aku hanya memverifikasi ini bekerja dengan safari,chrome,FF 3.6.

Perhatikan hal berikut jika anda melakukan hal ini:

1. Server anda akan memiliki untuk menangani 2 permintaan per operasi
2. Anda akan harus berpikir tentang implikasi keamanan. Berhati-hati sebelum melakukan sesuatu seperti 'Access-Control-Allow-Origin: *'
3. Ini tidak akan bekerja pada browser mobile. Dalam pengalaman saya, mereka tidak mengizinkan cross domain POST sama sekali. I've diuji android, iPad, iPhone
4. Ada yang cukup besar bug di FF < 3.6 dimana jika server kembali non-400 kode respon DAN ada respon tubuh (kesalahan validasi misalnya), FF 3.6 tidak mendapatkan respon tubuh. Ini adalah rasa sakit besar di pantat, karena anda bisa menggunakan ISTIRAHAT yang baik praktik. Melihat bug di sini (its filed under jQuery, tapi saya kira ini FF bug - tampaknya akan tetap di FF4).
5. Selalu kembali judul di atas, bukan hanya pada PILIHAN permintaan. FF kebutuhan itu di respon dari POS.

Jika anda kontrol remote server, anda mungkin harus menggunakan CORS, seperti yang dijelaskan dalam jawaban ini; it's didukung di IE8 dan atas, dan semua versi terbaru dari FF, GC, dan Safari. (Tapi di IE8 dan 9, CORS won't memungkinkan anda untuk mengirim cookie dalam permintaan.)

Jadi, jika anda don't kontrol remote server, atau jika anda memiliki untuk mendukung IE7, atau jika anda perlu cookies dan anda harus mendukung IE8/9, anda'll mungkin ingin menggunakan teknik iframe.

1. Membuat iframe dengan nama yang unik. (iframe menggunakan namespace global untuk seluruh browser, jadi memilih nama yang tidak ada website lain yang akan digunakan.)
2. Buatlah sebuah form dengan input tersembunyi, menargetkan iframe.
3. Menyerahkan formulir.

Berikut ini's kode contoh; saya diuji pada IE6, IE7, IE8, IE9, FF4, GC11, S5.

function crossDomainPost() {
  // Add the iframe with a unique name
  var iframe = document.createElement("iframe");
  var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;

  // construct a form with hidden inputs, targeting the iframe
  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://INSERT_YOUR_URL_HERE";
  form.method = "POST";

  // repeat for each parameter
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
  input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
}

Berhati-hatilah! Anda memenangkan't dapat langsung membaca respon dari POS, sejak iframe yang ada di domain terpisah. Frame aren't diperbolehkan untuk berkomunikasi dengan satu sama lain dari domain yang berbeda; ini adalah yang sama-asal kebijakan.

Jika anda kontrol remote server tetapi anda dapat't menggunakan CORS (misalnya karena anda're di IE8 IE9 dan anda perlu menggunakan cookies), ada cara untuk bekerja di sekitar sama-asal kebijakan, misalnya dengan menggunakan jendela.postMessage dan/atau salah satu dari sejumlah perpustakaan yang memungkinkan anda untuk mengirim cross-domain cross-frame pesan di browser lama:

• Kapal
• XSSInterface
• EasyXDM
• jQuery PostMessage Plugin

Jika anda don't control remote server, maka anda dapat't baca respon dari POS, periode. Hal itu akan menyebabkan masalah keamanan lainnya.

1. Membuat iFrame,
2. menempatkan bentuk di dalamnya dengan input Tersembunyi,
3. mengatur bentuk's tindakan untuk URL,
4. Menambahkan iframe untuk dokumen
5. menyerahkan formulir

Pseudocode

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 // create hidden inputs, add them
 // not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

Anda mungkin ingin gaya iframe, untuk menjadi tersembunyi dan benar-benar diposisikan. Tidak yakin cross site posting akan diizinkan oleh browser, tetapi jika jadi, ini adalah bagaimana untuk melakukannya.

Tetap sederhana:

1. cross domain POST:
   gunakan crossDomain: true,

2. seharusnya't refresh halaman:
   Tidak, itu tidak akan me-refresh halaman sebagai sukses atau kesalahan async callback yang akan dipanggil saat server mengirimkan kembali respon.

   ---

Contoh script:

$.ajax({
        type: "POST",
        url: "http://www.yoururl.com/",
        crossDomain: true,
        data: 'param1=value1&param2=value2',
        success: function (data) {
            // do something with server response data
        },
        error: function (err) {
            // handle your error logic here
        }
    });

Jika anda memiliki akses ke semua server yang terlibat, masukkan berikut ini di header balasan untuk halaman yang diminta dalam domain lainnya:

PHP:

header('Access-Control-Allow-Origin: *');

Misalnya, di Drupal's xmlrpc.php kode anda akan melakukan hal ini:

function xmlrpc_server_output($xml) {
    $xml = '<?xml version="1.0"?>'."\n". $xml;
    header('Connection: close');
    header('Content-Length: '. strlen($xml));
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/x-www-form-urlencoded');
    header('Date: '. date('r'));
    // $xml = str_replace("\n", " ", $xml); 

    echo $xml;
    exit;
}

Ini mungkin menciptakan masalah keamanan, dan anda harus memastikan bahwa anda mengambil langkah yang tepat untuk memverifikasi permintaan.

Periksa post_method fungsi di http://taiyolab.com/mbtweet/scripts/twitterapi_call.js - sebuah contoh yang baik untuk iframe metode yang dijelaskan di atas.

1. Membuat dua hidden iframe (tambahkan "display: none;" style css). Membuat iframe point untuk sesuatu yang pada domain anda sendiri.

2. Membuat bentuk tersembunyi, menetapkan metode untuk "post" target = pertama anda iframe, dan opsional mengatur enctype untuk "multipart/form-data" (I'm berpikir anda ingin melakukan POSTING karena anda ingin mengirim multipart data seperti gambar?)

3. Bila sudah siap, membuat form submit() POS.

4. Jika anda bisa mendapatkan domain lain untuk mengembalikan javascript yang akan melakukan Cross-Domain Komunikasi Dengan Iframe (http://softwareas.com/cross-domain-communication-with-iframes) maka anda sedang beruntung, dan anda dapat menangkap respon juga.

Tentu saja, jika anda ingin menggunakan server proxy, anda dapat menghindari semua ini. Cukup menyerahkan formulir ke server anda sendiri, yang akan proxy permintaan ke server lain (dengan asumsi server lain isn't mengatur untuk melihat perbedaan IP), mendapatkan respon, dan kembali apapun yang anda suka.

Satu hal yang lebih penting untuk dicatat!!! Di contoh di atas's dijelaskan cara menggunakan

$.ajax({
    type     : 'POST',
    dataType : 'json', 
    url      : 'another-remote-server',
    ...
});

JQuery 1.6 dan lebih rendah memiliki bug dengan cross-domain XHR. Menurut Firebug tidak ada permintaan kecuali PILIHAN yang dikirim. Tidak ada POSTING. Di semua.

Menghabiskan 5 jam pengujian/tuning kode saya. Menambahkan banyak header pada remote server (script). Tanpa efek apapun. Tapi kemudian, saya've diperbarui JQuery lib untuk 1.6.4, dan semuanya bekerja seperti pesona.

Jika anda ingin melakukan hal ini di ASP.net MVC lingkungan dengan JQuery AJAX, ikuti langkah-langkah berikut: (ini adalah ringkasan dari solusi yang ditawarkan di ini thread)

Asumsikan bahwa "pemanggil.com"(dapat berupa website) kebutuhan untuk posting ke "server.com"(an ASP.net aplikasi MVC)

1. Pada "server.com" aplikasi's Web.config tambahkan bagian berikut:

2. Pada "server.com", we'll memiliki tindakan berikut pada controller(disebut "Rumah") yang kita akan posting:

[HttpPost] publik JsonResult Simpan() { //Menangani data post...

return Json( baru { IsSuccess = true }); }

3. Kemudian dari "pemanggil.com", posting data dari form(dengan id html "formId") "server.com" sebagai berikut:

$.ajax({ jenis: "POST", url: "http://www.server.com/home/save", dataType: 'json', crossDomain: benar, data: $(formId).cerita bersambung(), success: function (jsonResult) { //melakukan apa yang pernah dengan balasan }, error: function (jqXHR, textStatus) { //menangani kesalahan } });

Saya pikir cara terbaik adalah untuk menggunakan XMLHttpRequest (misalnya $.ajax(), $.post() di jQuery) dengan salah satu Cross-Origin Resource Sharing polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-CORS

Tingkat tinggi.... Anda harus memiliki cname setup pada server anda sehingga other-serve.your-server.com poin untuk other-server.com.

Halaman anda secara dinamis menciptakan terlihat iframe, yang bertindak sebagai transportasi anda untuk other-server.com. Kemudian anda akan memiliki untuk berkomunikasi via JS dari halaman anda ke other-server.com dan memiliki panggilan punggung yang mengembalikan data kembali ke halaman anda.

Mungkin tetapi memerlukan koordinasi dari your-server.com dan other-server.com

Ada satu lagi cara (menggunakan fitur html5). Anda dapat menggunakan proxy iframe host pada domain yang lainnya, anda mengirim pesan menggunakan postMessage untuk itu iframe, maka iframe dapat melakukan permintaan POST (pada domain yang sama) dan postMessage kembali dengan reposnse untuk jendela induk.

orang tua di sender.com

var win = $('iframe')[0].contentWindow

function get(event) {
    if (event.origin === "http://reciver.com") {
        // event.data is response from POST
    }
}

if (window.addEventListener){
    addEventListener("message", get, false)
} else {
    attachEvent("onmessage", get)
}
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");

iframe pada reciver.com

function listener(event) {
    if (event.origin === "http://sender.com") {
        var data = JSON.parse(event.data);
        $.post(data.url, data.data, function(reponse) {
            window.parent.postMessage(reponse, "*");
        });
    }
}
// don't know if we can use jQuery here
if (window.addEventListener){
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}

Ini adalah pertanyaan lama, tapi beberapa teknologi baru yang dapat membantu seseorang keluar.

Jika anda memiliki akses administratif ke server lain maka anda dapat menggunakan opensource Forge proyek untuk mencapai lintas-domain POSTING. Forge menyediakan cross-domain JavaScript XmlHttpRequest pembungkus yang mengambil keuntungan dari Flash's raw socket API. POSTING dapat dilakukan melalui TLS.

Alasan anda memerlukan akses administratif ke server yang anda POSTing adalah karena anda harus menyediakan domain-silang kebijakan yang memungkinkan akses dari domain anda.

http://github.com/digitalbazaar/forge

Saya tahu ini adalah pertanyaan lama, tapi saya ingin berbagi pendekatan saya. Saya menggunakan cURL sebagai proxy, sangat mudah dan konsisten. Membuat sebuah halaman php yang disebut submit.php dan tambahkan kode berikut:

<?

function post($url, $data) {
$header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded");
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($curl);
curl_close($curl);
return $response;
}

$url = "your cross domain request here";
$data = $_SERVER["QUERY_STRING"];
echo(post($url, $data));

Kemudian, di js (jQuery di sini):

$.ajax({
type: 'POST',
url: 'submit.php',
crossDomain: true,
data: '{"some":"json"}',
dataType: 'json',
success: function(responseData, textStatus, jqXHR) {
    var value = responseData.someKey;
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});

Jika anda memiliki akses ke lintas domain server dan don't ingin membuat perubahan kode pada sisi server, anda dapat menggunakan perpustakaan disebut - 'xdomain'.

Cara kerjanya:

Langkah 1: server 1: termasuk xdomain perpustakaan dan mengkonfigurasi cross domain sebagai budak:

<script src="js/xdomain.min.js" slave="https://crossdomain_server/proxy.html"></script>

Langkah 2: pada cross server domain, membuat proxy.html file dan termasuk server 1 sebagai master:

proxy.html:

<script src="js/xdomain.min.js"></script>
<script>
  xdomain.masters({
    "https://server1" : '*'
  });
</script>

Langkah 3:

Sekarang, anda dapat membuat panggilan ke AJAX proxy.html sebagai akhir dari server1. Ini adalah memotong CORS permintaan. Perpustakaan internal menggunakan iframe solusi yang bekerja dengan Mandat dan semua metode yang mungkin: GET, POST dll.

Permintaan ajax code:

$.ajax({
        url: 'https://crossdomain_server/proxy.html',
        type: "POST",
        data: JSON.stringify(_data),
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    })
    .done(_success)
    .fail(_failed)

Harus mungkin dengan YQL custom meja + JS XHR, lihatlah: http://developer.yahoo.com/yql/guide/index.html

Saya gunakan untuk melakukan beberapa sisi klien (js) html gesekan, bekerja dengan baik (Saya memiliki full audio player, dengan mencari di internet/playlist/lirik/fm terakhir informasi, semua klien js + YQL)

CORS adalah untuk anda. CORS adalah "Palang Asal Berbagi Sumber daya", adalah cara untuk mengirim cross domain permintaan.Sekarang XMLHttpRequest2 dan Mengambil API keduanya mendukung CORS, dan dapat mengirim kedua POST dan GET request

Tapi itu ada batasnya.Server harus spesifik klaim Akses-Kontrol-Allow-Origin, dan hal ini tidak dapat diatur untuk '*'.

Dan jika anda ingin apapun asal dapat mengirim permintaan anda, anda perlu JSONP (juga perlu mengatur Akses-Kontrol-Allow-Origin, tetapi dapat '*')

Untuk banyak permintaan cara jika anda don't tahu bagaimana untuk pilihan, saya pikir anda perlu yang lengkap komponen fungsional untuk melakukan itu.Izinkan saya memperkenalkan sebuah komponen sederhana https://github.com/Joker-Jelly/catta

Jika anda menggunakan browser modern (> IE9, Chrome, FF, Edge, dll.), Sangat Merekomendasikan anda untuk menggunakan sederhana tapi kecantikan komponen https://github.com/Joker-Jelly/catta.Itu tidak memiliki ketergantungan, Kurang dari 3KB, dan dukungan Fetch, AJAX dan JSONP sama dengan mematikan contoh sintaks dan pilihan.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Ini juga mendukung semua cara untuk mengimpor ke proyek anda, seperti ES6 modul, CommonJS dan bahkan <script> dalam HTML.