Catatan jQuery Ajax
- Karena pembatasan keamanan browser, sebagian besar permintaan Ajax tunduk pada kebijakan asal yang sama ; permintaan tidak dapat berhasil mengambil data dari domain, subdomain, port, atau protokol yang berbeda.
- Permintaan skrip dan JSONP tidak tunduk pada batasan kebijakan asal yang sama.
Ada beberapa cara untuk mengatasi penghalang lintas-domain :
Ada beberapa plugin yang membantu dengan permintaan lintas-domain :
Kepala!
Cara terbaik untuk mengatasi masalah ini, adalah dengan membuat proxy Anda sendiri di back-end, sehingga proxy Anda akan menunjuk ke layanan di domain lain, karena di back-end tidak ada batasan kebijakan asal yang sama . Tetapi jika Anda tidak bisa melakukan itu di back-end, maka perhatikan tips berikut.
Peringatan!
Menggunakan proxy pihak ketiga bukanlah praktik yang aman, karena mereka dapat melacak data Anda, sehingga dapat digunakan dengan informasi publik, tetapi tidak pernah dengan data pribadi.
Contoh kode yang ditunjukkan di bawah ini menggunakan jQuery.get () dan jQuery.getJSON () , keduanya adalah metode singkatan dari jQuery.ajax ()
CORS Anywhere
CORS Anywhere adalah proxy node.js yang menambahkan header CORS ke permintaan proksi.
Untuk menggunakan API, cukup awali URL dengan URL API. (Mendukung https : lihat repositori github )
Jika Anda ingin secara otomatis mengaktifkan permintaan lintas domain saat diperlukan, gunakan cuplikan berikut:
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Asal apapun
Apapun Asal adalah akses jsonp lintas domain . Ini adalah alternatif sumber terbuka untuk anyorigin.com .
Untuk mengambil data dari google.com, Anda dapat menggunakan potongan ini:
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
Proxy CORS
CORS Proxy adalah proxy node.js sederhana untuk mengaktifkan permintaan CORS untuk situs web apa pun. Ini memungkinkan kode javascript di situs Anda untuk mengakses sumber daya di domain lain yang biasanya akan diblokir karena kebijakan asal yang sama.
Bagaimana cara kerjanya? CORS Proxy mengambil keuntungan dari Cross-Origin Resource Sharing, yang merupakan fitur yang ditambahkan bersama dengan HTML 5. Server dapat menentukan bahwa mereka ingin browser mengizinkan situs web lain untuk meminta sumber daya yang dihosting. CORS Proxy hanyalah Proxy HTTP yang menambahkan header ke respons yang mengatakan "siapa pun dapat meminta ini".
Ini adalah cara lain untuk mencapai tujuan (lihat www.corsproxy.com ). Yang harus Anda lakukan adalah menghapus http: // dan www. dari URL yang diproksikan, dan tambahkan URL denganwww.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Browser proxy CORS
Baru-baru ini saya menemukan yang satu ini, itu melibatkan berbagai utilitas Cross Origin Remote Sharing yang berorientasi keamanan. Tapi itu adalah kotak hitam dengan Flash sebagai backend.
Anda dapat melihatnya beraksi di sini: Browser proxy CORS
Dapatkan kode sumber di GitHub: koto / cors-proxy-browser