ΕΠΙΔΙΌΡΘΩΣΗ: Δεν υπάρχει σφάλμα κεφαλίδας access-control-allow-origin στο Angular

Ένα από τα πιο κοινά μηνύματα σφάλματος που μπορούν να συναντήσουν οι προγραμματιστές της γωνίας στην καθημερινή τους εργασία είναι:

Δεν υπάρχει κεφαλίδα πρόσβασης-ελέγχου-επιτρεπόμενης προέλευσης στον απαιτούμενο πόρο.

Αυτό δεν είναι ένα συγκεκριμένο γωνιακό πρόβλημα, αλλά ένα CORS (Πρόβλημα κεφαλίδας Cross-Origin Resource Sharing). Θα μπορούσε να σημαίνει ότι ο διακομιστής back-end έχει ρυθμιστεί ώστε να λειτουργεί σε διαφορετική θύρα ή τομέα.

---

Πώς μπορώ να διορθώσω το σφάλμα No access-control στα Windows 10;

1. Πραγματοποιήστε αλλαγές σε επίπεδο διακομιστή

Εάν έχετε πρόσβαση στο διακομιστή, ενεργοποιήστε τα αιτήματα CROS προσθέτοντας Access-Control-Allow-Origin: * επί κεφαλής. Μετά από αυτό, διαμορφώστε κορσές είσοδος, υπό system.webServer σε web.config αρχείο, όπως στο παρακάτω παράδειγμα.

• ”1.0″?
• ενεργοποιημένο ="αληθής">
• προέλευση =“ https://someorigin.domain.com”>
• μέθοδος ="ΠΑΙΡΝΩ"/>
• μέθοδος ="ΚΕΦΑΛΙ"/>
• </system.webServer>

Εδώ, κορσές θα επιτρέψει ΠΑΙΡΝΩ και ΚΕΦΑΛΙ αιτήματα από https://someorigin.domain.com/.

Επίσης, εάν χρησιμοποιείτε IIS (Υπηρεσίες πληροφοριών Διαδικτύου) θα πρέπει να κατεβάσετε Ενότητα IIS CORS.

Προσέξτε να καθορίσετε έναν τομέα ή μια λίστα τομέων αντί για *. Διαφορετικά, τα αιτήματα πολλαπλής προέλευσης στον διακομιστή θα ενεργοποιηθούν από οπουδήποτε.

Επί Απάχης, στο αρχείο διαμόρφωσης, πρέπει να προσθέσετε τη γραμμή Σετ κεφαλίδας Access-Control-Allow-Origin «*». Και πάλι, είναι συνετό να αντικαταστήσετε το "*", με μια λίστα πηγών από όπου θα υποβληθούν τα αιτήματα.

---

2. Εκτελέστε τον δικό σας διακομιστή μεσολάβησης

1. Πρώτον, θα δημιουργήσουμε ένα αρχείο διαμόρφωσης διακομιστή μεσολάβησης, στον ριζικό φάκελο Angular, που ονομάζεται src / proxy.conf.json, και γράψτε τον παρακάτω κωδικό:
   • {"/ api":
   • "στόχος":" http://localhost: 6000 "," ασφαλής ": false}
   • }
2. Δεύτερον, στο angular.jsonαρχείο, προσθέστε το proxyConfigεπιλογή στο σερβίρισμα στόχος:
   • "σερβίρισμα": {
   • "οικοδόμος":" ",
     
   • "επιλογές":{"proxyConfig":"src / proxy.conf.json"}
     
   • }
3. Τώρα εκτελέστε την τρέχουσα διαμόρφωση με το εξυπηρέτηση εντολή.

Ένας διακομιστής μεσολάβησης θα προωθούσε τα αιτήματά σας στον απομακρυσμένο διακομιστή. Στη συνέχεια, θα δούμε πώς να διαμορφώσουμε έναν διακομιστή μεσολάβησης.

Τα αιτήματα για δεδομένα στο Angular είναι κλήσεις API προς localhost, στη θύρα 4200, όπως αυτή η τοποθεσία:

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

Ωστόσο, στο παραπάνω παράδειγμα, υποθέσαμε ότι τα ζητούμενα δεδομένα είναι αυτή η τοποθεσία:

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

---

Ενδιαφέρεστε για καλές λύσεις μεσολάβησης; Δείτε αυτήν τη λίστα αποκλειστικών εργαλείων

---

3. ρεείναι δυνατή η ίδια πολιτική προέλευσης στο πρόγραμμα περιήγησής σας

Σημείωση: Αυτή η συγκεκριμένη μέθοδος δεν συνιστάται, καθώς μπορεί να εκθέσει το πρόγραμμα περιήγησής σας (και το σύστημά σας) σε μεγάλους κινδύνους ασφαλείας.

Εάν όλα τα άλλα δεν λειτουργούν, μπορείτε να καταργήσετε την απενεργοποίηση της ίδιας πολιτικής προέλευσης στο πρόγραμμα περιήγησης. Ωστόσο, προσέξτε, καθώς αυτό θα εκθέσει το πρόγραμμα περιήγησής σας (και το σύστημά σας) σε μεγάλους κινδύνους ασφαλείας.

Για Google Chrome, στα Windows 10, ανοίξτε τη γραμμή εντολών ως διαχειριστής και εκτελέστε την ακόλουθη εντολή:

C: Αρχεία προγράμματος (x86) GoogleChromeApplicationchrome.exe "--disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp..

Συμπερασματικά, Δεν υπάρχει κεφαλίδα πρόσβασης-ελέγχου-επιτρεπόμενης προέλευσης στον απαιτούμενο πόρο το μήνυμα σφάλματος είναι ένα ζήτημα από την πλευρά του διακομιστή.

Για προγραμματιστές Angular, η τροποποίηση της διαμόρφωσης διακομιστή ή η χρήση διακομιστή μεσολάβησης θα πρέπει να λειτουργεί καλά.

Πείτε μας τη γνώμη σας για αυτόν τον οδηγό στην παρακάτω ενότητα σχολίων.

---

---