Bagaimanakah Saya Boleh Menyelesaikan Ralat Permintaan Silang Asal Semasa Mengambil Data Menggunakan JavaScript?

Cuba Lumpuhkan CORS dengan Ambil dan Berurusan dengan 'Access-Control-Allow-Origin'

Anda telah menghadapi cabaran biasa apabila mencuba permintaan silang asal daripada kod JavaScript pelanggan anda menggunakan Ambil. Mesej ralat yang anda terima menunjukkan bahawa titik akhir yang anda cuba ambil daripadanya tidak termasuk pengepala 'Access-Control-Allow-Origin', yang diperlukan untuk akses silang asal.

Masalah: Anda cuba menggunakan objek { mod: 'no-cors' } dalam Ambil untuk melumpuhkan CORS, tetapi pendekatan ini ialah tidak betul.

Mengapa Mod 'no-cors' Tidak Berfungsi:

Mod tetapan: 'no-cors' dalam Fetch tidak melumpuhkan CORS; sebaliknya, ia memberitahu penyemak imbas untuk menghalang JavaScript bahagian hadapan anda daripada mengakses badan respons dan pengepala. Tetapan ini biasanya tidak diingini, kerana anda biasanya mahu kod anda boleh mengakses respons.

Penyelesaian: Proksi CORS

Penyelesaian kepada masalah ini terletak pada menggunakan proksi CORS. Proksi CORS bertindak sebagai perantara antara kod bahagian hadapan anda dan titik akhir jauh, mendayakan permintaan silang asal dengan mengubah suai pengepala respons.

Dengan menggunakan proksi CORS, anda boleh memajukan permintaan anda melalui proksi, yang akan menambah pengepala Access-Control-Allow-Origin yang diperlukan untuk respons. Ini membolehkan kod bahagian hadapan anda mengakses badan respons dan pengepala seolah-olah ia datang dari asal yang sama.

Menggunakan Proksi Anda Sendiri

Cara mudah untuk menggunakan proksi CORS sendiri perlu mengikuti langkah berikut:

1. Klon repositori GitHub cors-mana-mana sahaja (https://github.com/Rob--W/cors-anywhere).
2. Pasang kebergantungan menggunakan pemasangan npm.
3. Buat akaun Heroku dan jalankan heroku create.
4. Tolak kod anda ke Heroku menggunakan git push heroku master.

Setelah digunakan, anda akan mempunyai proksi CORS yang sedang berjalan di URL seperti https://cryptic-headland-94862.herokuapp.com.

Melampirkan URL Permintaan Anda dengan URL Proksi

Kepada gunakan proksi, cuma awalan URL permintaan anda dengan URL proksi. Contohnya, jika anda ingin mengambil https://example.com, anda akan menggunakan URL berikut:

https://cryptic-headland-94862.herokuapp.com/https://example.com

Dengan menetapkan awalan URL permintaan dengan proksi, anda akan dapat membuat permintaan silang asal dengan jayanya, terima kasih kepada Access-Control-Allow-Origin pengepala ditambahkan oleh proksi.

Pertimbangan Tambahan:

• Posmen boleh mengakses titik akhir kerana ia adalah alat penyahpepijatan yang mengabaikan sekatan asal yang sama.
• Menggunakan mod: 'tiada-cor' atau mod: 'legap' dalam Ambil bukanlah pendekatan yang betul untuk melumpuhkan CORS.
• CORS ialah langkah keselamatan, dan adalah penting untuk tidak memintasnya secara sembarangan. Sentiasa pertimbangkan implikasi keselamatan sebelum melumpuhkan sekatan CORS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyelesaikan Ralat Permintaan Silang Asal Semasa Mengambil Data Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!