Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menyelesaikan Ralat 'Tiada 'Access-Control-Allow-Origin'' semasa Mengambil Data daripada REST API?

Bagaimana untuk Menyelesaikan Ralat 'Tiada 'Access-Control-Allow-Origin'' semasa Mengambil Data daripada REST API?

Barbara Streisand
Barbara Streisandasal
2024-12-21 14:15:11779semak imbas

How to Solve the

"Tiada pengepala 'Access-Control-Allow-Origin' hadir pada sumber yang diminta" semasa Mengambil Data daripada REST API

Apabila cuba mendapatkan data daripada API REST semasa bekerja pada hos tempatan, anda mungkin menghadapi mesej ralat "Ambil API tidak boleh memuatkan . Respons kepada permintaan prapenerbangan tidak lulus akses semakan kawalan: Tiada pengepala 'Access-Control-Allow-Origin' hadir pada sumber yang diminta." Ralat ini berpunca daripada "Dasar Asal Sama" yang dikuatkuasakan oleh penyemak imbas, mengehadkan sumber daripada asal yang berbeza (domain, port dan protokol) daripada berinteraksi antara satu sama lain.

Mengatasi Ralat

Menggunakan Proksi CORS

Jika anda kurang kawalan ke atas pelayan yang mengehos API REST anda dan satu-satunya isu dengan responsnya ialah ketiadaan pengepala Access-Control-Allow-Origin yang diperlukan, anda boleh memanfaatkan proksi CORS untuk memudahkan permintaan.

Berikut ialah langkah untuk menyediakan proksi anda sendiri:

  1. Klon repositori: git clone https://github.com/Rob--W/cors-anywhere.git
  2. Navigasi ke direktori klon: cd cors-anywhere/
  3. Pasang kebergantungan: npm install
  4. Buat contoh Heroku: heroku create
  5. Kerahkan proksi: git push heroku master

Setelah digunakan, letakkan awalan URL API REST anda dengan URL proksi yang dijana. Contohnya: https://cryptic-headland-94862.herokuapp.com/https://example.com.

Mengelakkan CORS Preflight

Permintaan dalam soalan mencetuskan permintaan prapenerbangan yang perlu dibayar kepada kemasukan pengepala Kebenaran. Untuk menghalang prapenerbangan ini, pertimbangkan untuk menggunakan salah satu teknik berikut:

  • Abaikan pengepala Kebenaran daripada permintaan awal.
  • Gunakan mekanisme pengesahan yang berbeza, seperti membenamkan data pengesahan dalam minta badan atau parameter pertanyaan.
  • Ubah suai pelayan untuk menerima permintaan POST dengan Jenis Kandungan: application/x-www-form-urlencoded body yang mengandungi parameter berformat JSON.

Menyelesaikan "Access-Control-Allow-Origin header mestilah bukan wildcard"

Untuk permintaan yang melibatkan kelayakan, penyemak imbas mengehadkan akses kod JavaScript bahagian hadapan kepada respons jika nilai pengepala Access-Control-Allow-Origin ialah '*'. Dalam kes sedemikian, nilai mesti sepadan dengan tepat dengan asal kod bahagian hadapan anda (cth., http://127.0.0.1:3000).

Nota: Elakkan menggunakan pemalam Chrome CORS, sebagai mereka hanya menyuntik tajuk Access-Control-Allow-Origin: * generik ke dalam respons, yang mungkin membawa kepada tingkah laku yang tidak dijangka. Gunakan arahan curl dengan bendera -H untuk ujian yang boleh dipercayai.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat 'Tiada 'Access-Control-Allow-Origin'' semasa Mengambil Data daripada REST API?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn