jquery ajax pelaporan ralat permintaan merentas domain

Dengan perkembangan teknologi hadapan, penggunaan jQuery semakin tinggi dan lebih tinggi. Antaranya, adalah sangat biasa untuk menggunakan permintaan ajax dalam jQuery untuk mendapatkan data Walau bagaimanapun, dalam pembangunan sebenar, beberapa masalah akan berlaku apabila menghadapi permintaan merentas domain.

1. Apakah permintaan merentas domain?

Di bawah nama domain yang sama, permintaan ajax penyemak imbas boleh menghantar dan menerima data secara bebas. Walau bagaimanapun, di bawah nama domain yang berbeza, permintaan ajax dalam penyemak imbas dihadkan oleh dasar keselamatan, dan data tidak boleh dihantar dan diterima sesuka hati. Dengan cara ini, permintaan merentas domain berlaku.

2. Mengapa ralat permintaan merentas domain berlaku

Atas sebab keselamatan, penyemak imbas menggunakan dasar asal yang sama. Dasar asal yang sama bermakna skrip klien daripada sumber yang berbeza tidak boleh membaca sumber satu sama lain tanpa kebenaran yang jelas. Di bawah dasar asal yang sama, skrip klien daripada sumber yang berbeza tidak boleh mengganggu satu sama lain, sekali gus memastikan keselamatan aplikasi web.

Secara khusus, homologi bermaksud protokol, nama domain dan nombor port adalah sama sepenuhnya.

3. Bagaimana untuk menyelesaikan ralat permintaan merentas domain

Dengan pengetahuan latar belakang di atas, kami boleh menyelesaikan masalah ini untuk ralat permintaan merentas domain.

1. Permintaan merentas domain JSONP

JSONP (JSON dengan Padding) ialah penyelesaian untuk permintaan merentas domain. Prinsipnya ialah apabila membuat permintaan, bahagian hadapan secara dinamik mencipta teg skrip dan menghantar nama fungsi panggil balik, dan data yang dikembalikan oleh pelayan akan dilaksanakan dalam fungsi panggil balik.

Langkah khusus adalah seperti berikut:

1) Kod bahagian hadapan

$.ajax({
    url:'/api/get-data',
    dataType:'jsonp',
    jsonp:'callback',
    success:function (data) {
        console.log(data);
    }
});

Penerangan:

url: alamat antara muka yang diminta

dataType: Jenis data, berikut adalah jsonp

jsonp: fungsi permintaan pelanggan, nama fungsi akan digunakan sebagai nama fungsi panggil balik

kejayaan: permintaan berjaya

2) Kod hujung belakang

(1) Tambah panggil balik parameter permintaan sebelum nilai pulangan

{
'nama':'Tom',
'umur':23,
'seks' :'Lelaki',
'Kod panggilan balik':1
}

(2) Hasil pengembalian

callbacks.callbackCode({"name":"Tom ","umur" :23,"seks":"lelaki"});

Antaranya, Kod panggil balik ialah nama kaedah permintaan yang ditetapkan oleh hujung hadapan.

Contoh lain:

(1) Panggilan balik parameter permintaan ditambahkan sebelum nilai pulangan

{
'kod':'0',
' data' :{

   'name':'Tom',
   'age':23,
   'sex':'男',

},
'mesej': 'Permintaan berjaya! ',
'Kod panggil balik':1
}

(2) Bahagian belakang menyambung fungsi panggil balik melalui parameter Kod panggil balik.

callbacks.callbackCode({"code":"0","data":{"name":"Tom","age":23,"jantina":"lelaki"},"message" :"Permintaan berjaya!"});

Melalui langkah di atas, kami boleh menggunakan JSONP untuk membuat permintaan merentas domain. Walau bagaimanapun, JSONP juga mempunyai beberapa had, seperti hanya menyokong permintaan GET dan tidak dapat mendapatkan respons kepada permintaan POST.

2. Tambahkan pengepala respons Access-Control-Allow-Origin

Cara lain ialah menetapkannya pada antara muka hujung belakang dan tambah Access-Control- dalam pengepala respons. Medan Allow-Origin memberitahu penyemak imbas yang meminta untuk membenarkan permintaan merentas domain ini.

Contoh kod:

@RequestMapping("/api/get-data")
@RestController
kelas awam GetDataController {

@GetMapping
public String getData(HttpServletRequest request) {
    String callback = request.getParameter("callback");

    //模拟后端返回数据
    String json = "{"name":"Tom","age":23,"sex":"男"}";

    //跨域请求响应头设置
    String result = callback + "(" + json + ")";
    return result;
}

}

Antaranya, kaedah dipetakan ke antara muka /api/get-data melalui anotasi @GetMapping, kemudian parameter permintaan panggil balik diperoleh, hujung belakang disimulasikan untuk mengembalikan data, dan akhirnya data json dikembalikan dalam bentuk fungsi panggil balik melalui pembolehubah hasil.

Melalui dua kaedah di atas, kami boleh menyelesaikan masalah ralat permintaan merentas domain.

Ringkasan:

Melalui pengenalan artikel ini, kami memahami apa itu permintaan merentas domain, sebab ralat permintaan merentas domain berlaku dan cara menyelesaikan ralat permintaan merentas domain. Antaranya, kami memperkenalkan dua kaedah terutamanya: permintaan merentas domain JSONP dan menambah pengepala respons Access-Control-Allow-Origin. Sudah tentu, memilih kaedah yang berbeza untuk menyelesaikan masalah dalam senario yang berbeza benar-benar dapat memenuhi keperluan.

Atas ialah kandungan terperinci jquery ajax pelaporan ralat permintaan merentas domain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!