Bagaimana untuk Menyelesaikan Ralat CORS dalam Aplikasi AngularJS?

Cara Mengendalikan CORS dalam AngularJs

Cross-Origin Resource Sharing (CORS) ialah mekanisme yang membenarkan sumber terkawal akses daripada asal yang berbeza untuk diminta daripada aplikasi web, tanpa mengira asal usul pelanggan aplikasi.

Memahami Ralat

Isu CORS timbul apabila halaman web cuba mengakses sumber daripada domain yang berbeza daripada domainnya sendiri. Biasanya, penyemak imbas mengehadkan tingkah laku ini atas sebab keselamatan. Ralat yang disebut dalam pertanyaan, "XMLHttpRequest tidak boleh memuatkan URL. Asal tidak dibenarkan oleh Access-Control-Allow-Origin," menunjukkan bahawa permintaan itu tidak dibenarkan oleh pelayan kerana sekatan CORS.

Penyelesaian

Adalah penting untuk ambil perhatian bahawa AngularJs tidak boleh memintas sekatan CORS sendiri. CORS perlu didayakan pada bahagian pelayan. Pelayan mesti mengkonfigurasi pengepala responsnya untuk memasukkan maklumat yang diperlukan untuk penyemak imbas untuk membenarkan permintaan.

Konfigurasi Bahagian Pelayan

Bergantung pada teknologi pelayan dan pelayan web digunakan, langkah konfigurasi khusus untuk mendayakan CORS berbeza-beza. Secara amnya, ia melibatkan penambahan pengepala yang sesuai pada respons HTTP, seperti:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Authorization

Amalan Terbaik

• Gunakan asal-usul tertentu dan bukannya '*' untuk kawal domain mana yang dibenarkan untuk mengakses sumber.
• Hadkan kaedah HTTP yang dibenarkan untuk mengelakkan yang tidak diingini permintaan.
• Nyatakan pengepala permintaan yang dibenarkan untuk mengawal jenis data yang boleh ditukar.

Konfigurasi Contoh (Node.js)

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://example.com');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

Kesimpulan

Membolehkan CORS pada bahagian pelayan adalah penting untuk menyelesaikan isu CORS dalam aplikasi AngularJs. Dengan mengkonfigurasi pengepala respons dengan betul, anda boleh memberikan akses kepada sumber daripada asal yang berbeza dan memastikan pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat CORS dalam Aplikasi AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!