Mengapa AJAX Gagal Memuatkan HTML Merentas Domain Melainkan JSONP Digunakan, dan Bagaimana Ini Boleh Diselesaikan?

Memuatkan Cross-Domain Endpoint dengan AJAX

Masalah:

Anda menghadapi kesukaran memuatkan halaman HTML merentas domain menggunakan AJAX melainkan dataType ditetapkan kepada "jsonp." Walaupun semasa menggunakan JSONP, penyemak imbas menjangkakan jenis mime skrip tetapi sebaliknya menerima "teks/html."

Penyelesaian 1: Menggunakan Proksi Pihak Ketiga

Disebabkan keselamatan kebimbangan dengan proksi pihak ketiga yang menjejaki data pengguna, penggunaan mereka dengan maklumat peribadi adalah tidak digalakkan. Walau bagaimanapun, ia mungkin sesuai untuk senario data awam.

Pertimbangkan pilihan proksi berikut:

• CORS Anywhere: Menambahkan pengepala CORS pada permintaan yang diproksikan secara automatik.

$.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;
  }
});

• Apa sahaja Asal: Memudahkan akses JSONP merentas domain.

$.ajaxSetup({
  scriptCharset: "utf-8",
  contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' +
  encodeURIComponent('http://google.com') + '&callback=?',
  function (data) {
    console.log("> ", data);
    $("#viewer").html(data.contents);
  }
);

• Proksi CORS: Memudahkan permintaan CORS untuk mana-mana tapak web.

$.get(
  'http://www.corsproxy.com/' +
  'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
  function (response) {
    console.log("> ", response);
    $("#viewer").html(response);
  }
);

Penyelesaian 2: Mewujudkan Bahagian Belakang Anda Proksi

Pendekatan paling selamat ialah membuat proksi di bahagian belakang, menyelesaikan isu merentas domain.

Atas ialah kandungan terperinci Mengapa AJAX Gagal Memuatkan HTML Merentas Domain Melainkan JSONP Digunakan, dan Bagaimana Ini Boleh Diselesaikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!