Bagaimanakah Saya Boleh Menyelesaikan Permintaan AJAX Cross-Domain Apabila Memuatkan Titik Akhir HTML?

Memuatkan Cross-Domain Endpoint dengan AJAX

Cross-Origin Resource Sharing (CORS) ialah protokol yang membenarkan penyemak imbas web membuat permintaan kepada sumber pada domain lain. Walau bagaimanapun, terdapat beberapa sekatan yang ditetapkan untuk menghalang penggunaan hasad keupayaan ini.

Isu

Apabila cuba memuatkan halaman HTML merentas domain menggunakan AJAX, anda mungkin menghadapi masalah melainkan dataType adalah ditetapkan kepada "jsonp". Walau bagaimanapun, menggunakan JSONP, penyemak imbas menjangkakan jenis mime skrip, tetapi ia menerima "teks/html" sebaliknya. Selain itu, menggunakan parameter crossDomain belum menyelesaikan isu.

Penyelesaian

Terdapat beberapa pendekatan untuk mengatasi halangan merentas domain:

JSONP

JSONP (JSON dengan Padding) ialah teknik yang membenarkan permintaan AJAX merentas domain dengan membungkus respons dalam panggilan fungsi. Ini boleh dicapai dengan menetapkan parameter dataType kepada "jsonp" dan menyediakan fungsi panggil balik sebagai pengendali kejayaan.

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

Proksi CORS

Proksi CORS ialah pelayan perantara yang boleh digunakan untuk memintas dasar asal yang sama. Mereka menambah pengepala yang diperlukan pada permintaan untuk membenarkan penyemak imbas mengakses sumber pada domain lain. Beberapa perkhidmatan proksi CORS terkenal tersedia dalam talian.

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere ialah pelayan proksi CORS yang popular yang boleh digunakan untuk mengambil sumber daripada mana-mana domain.

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin ialah perpustakaan sumber terbuka yang menggunakan JSONP untuk mendayakan permintaan merentas domain.

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

Perhatikan bahawa walaupun teknik ini boleh membantu mengatasi sekatan merentas domain, adalah penting untuk mempertimbangkan implikasi keselamatan dan mematuhi prinsip Dasar Asal Sama apabila bekerja dengan luaran sumber.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyelesaikan Permintaan AJAX Cross-Domain Apabila Memuatkan Titik Akhir HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!