FIX: Tidak ada kesalahan header access-control-allow-Origin di Angular

Salah satu pesan kesalahan paling umum yang dapat ditemui oleh pengembang Angular dalam pekerjaan sehari-hari mereka adalah: tidak ada header akses-kontrol-izinkan-asal pada sumber daya yang diminta.

Ini bukan masalah Angular spesifik, tetapi CORS (Masalah tajuk Cross-Origin Resource Sharing). Ini bisa berarti bahwa server back-end dikonfigurasi untuk bekerja pada port atau domain yang berbeda.

---

Bagaimana cara memperbaiki kesalahan Tidak ada kontrol akses pada Windows 10?

1. Buat perubahan di tingkat server

Jika Anda memiliki akses ke server, aktifkan permintaan CROS dengan menambahkan Akses-Kontrol-Izinkan-Asal: * kepala. Setelah itu, konfigurasikan kors masuk, di bawah sistem.webServer di web.config file, seperti pada contoh di bawah ini.

• ”1.0″?
• diaktifkan="benar">
• asal =“ https://someorigin.domain.com”>
• metode ="DAPATKAN"/>
• metode ="KEPALA"/>
• </system.webServer>

Sini, kors akan memperbolehkan DAPATKAN dan KEPALA permintaan dari https://someorigin.domain.com/.

Juga, jika Anda menggunakan IIS (Layanan Informasi Internet) Anda perlu mengunduh Modul IIS CORS.

Berhati-hatilah untuk menentukan domain atau daftar domain alih-alih *. Jika tidak, permintaan lintas asal ke server akan diaktifkan dari mana saja.

Di Apache, dalam file konfigurasi, Anda perlu menambahkan baris Header mengatur Access-Control-Allow-Origin '*'. Sekali lagi, adalah bijaksana untuk mengganti '*', dengan daftar sumber dari mana permintaan akan dibuat.

---

2. Jalankan server proxy Anda sendiri

1. Pertama, kita akan membuat file konfigurasi proxy, di folder root Angular, yang disebut src/proxy.conf.json, dan tulis kode berikut di dalamnya:
   • {"/api":
   • "target":" http://localhost: 6000","aman": salah }
   • }
2. Kedua, di danular.jsonfile, tambahkan proxyConfigpilihan di Menyajikan target:
   • "Menyajikan": {
   • "pembangun":" ",
     
   • "pilihan":{"proxyConfig":"src/proxy.conf.json"}
     
   • }
3. Sekarang jalankan konfigurasi saat ini dengan ng melayani perintah.

Server proxy akan meneruskan permintaan Anda ke server jarak jauh. Selanjutnya, kita akan melihat cara mengkonfigurasi server proxy.

Permintaan data di Angular adalah panggilan API ke localhost, pada port 4200, seperti lokasi ini:

• http://localhost: 4200/api/datareq.

Namun, dalam contoh di atas, kami berasumsi bahwa data yang diminta adalah lokasi ini:

• http://localhost: 6000/api/datareq.

---

Tertarik dengan solusi proxy yang bagus? Lihat daftar alat khusus ini

---

3. Daktifkan Kebijakan Asal yang Sama di browser Anda

catatan: metode khusus ini tidak disarankan karena ini dapat membuat browser Anda (dan sistem Anda) terkena risiko keamanan utama.

Jika semuanya tidak berfungsi, Anda dapat menonaktifkan Kebijakan Asal yang Sama di browser. Namun berhati-hatilah, karena ini akan membuat browser Anda (dan sistem Anda) terkena risiko keamanan utama.

Untuk Google Chrome, di Windows 10, buka Command Prompt sebagai administrator dan jalankan perintah berikut:

C: Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp..

Kesimpulannya, tidak ada header akses-kontrol-izinkan-asal pada sumber daya yang diminta pesan kesalahan adalah masalah sisi server.

Untuk pengembang Angular, memodifikasi konfigurasi server atau menggunakan server proxy akan berfungsi dengan baik.

Beri tahu kami pendapat Anda tentang panduan ini di bagian komentar di bawah.

---

---