Bagaimana untuk Menyelesaikan Ralat \'Origin is Not Allowed by Access-Control-Allow-Origin\' dalam Permintaan AJAX Cross-Origin?

Masalah: "Origin is Not Allowed by Access-Control-Allow-Origin"

Apabila melakukan permintaan AJAX silang asal menggunakan JavaScript, anda mungkin menghadapi ralat berikut :

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Ralat ini berlaku disebabkan oleh "Dasar Asal yang Sama", iaitu ciri keselamatan yang dilaksanakan dalam penyemak imbas untuk menghalang skrip hasad daripada mengakses data daripada domain lain.

Punca

"Dasar Asal Sama" mengehadkan permintaan AJAX kepada domain, protokol dan port yang sama sebagai halaman asal. Jika JavaScript anda dihoskan pada domain, protokol atau port yang berbeza daripada pelayan yang anda cuba akses, permintaan itu akan disekat.

Penyelesaian: JSONP

Untuk memintas "Same Dasar Asal," satu penyelesaian biasa ialah menggunakan JSONP (JSON dengan Padding). JSONP membenarkan anda membuat permintaan silang asal dengan membungkus respons dalam fungsi panggil balik yang ditakrifkan dalam JavaScript anda sendiri.

Begini cara JSONP berfungsi:

1. Tentukan fungsi panggil balik dalam JavaScript anda.
2. Hantar permintaan AJAX dengan URL yang berakhir dengan ?callback={callback_function_name}.
3. Pelayan bertindak balas dengan data JSON yang dibungkus dalam fungsi panggil balik.
4. The fungsi panggil balik dilaksanakan, menerima data respons.

Contoh

Untuk menyelesaikan ralat dalam kod yang diberikan, yang cuba membuat permintaan POST silang asal kepada YouTube, anda boleh menggunakan JSONP seperti berikut:

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

Dalam contoh ini, callbackFunction ialah fungsi yang ditakrifkan dalam JavaScript anda sendiri, yang akan menerima respons daripada YouTube sebagai hujah.

Nota : Adalah penting untuk memastikan pelayan yang anda hantar permintaan menyokong JSONP dan anda menggunakan nama fungsi panggil balik yang betul dalam URL.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat \'Origin is Not Allowed by Access-Control-Allow-Origin\' dalam Permintaan AJAX Cross-Origin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!