Ακολουθούν τα βασικά βήματα για να εντοπίσουν σφάλματα CORS χρησιμοποιώντας τα εργαλεία προγραμματιστή του προγράμματος περιήγησης:
1. Ανοίξτε τα εργαλεία προγραμματιστή: Στα περισσότερα προγράμματα περιήγησης, μπορείτε να ανοίξετε τα εργαλεία προγραμματιστή πατώντας F12 ή CTRL+Shift+I. Αυτό θα ανοίξει τον πίνακα εργαλείων προγραμματιστή.
2. Πηγαίνετε στην καρτέλα Δικτύου: Αναζητήστε την καρτέλα "Δίκτυο" στα εργαλεία προγραμματιστή και κάντε κλικ σε αυτήν. Αυτό θα σας δείξει όλα τα αιτήματα δικτύου που προέρχεται από τη σελίδα.
3. Προσδιορίστε το αίτημα αποτυχίας CORS: Αναζητήστε τυχόν αποτυχημένα αιτήματα που επισημαίνονται με κόκκινο χρώμα. Αυτά είναι πιθανό τα αιτήματα που αποτυγχάνουν από την Κορούνια.
4. Επιθεωρήστε τις κεφαλίδες αίτησης: Κάντε κλικ στο αποτυχημένο αίτημα για να δείτε περισσότερες λεπτομέρειες. Στη συνέχεια, μεταβείτε στην καρτέλα "Headers" για να επιθεωρήσετε τις κεφαλίδες αίτησης και απάντησης.
5. Ελέγξτε τις κεφαλίδες που σχετίζονται με το CORS: Αναζητήστε τις ακόλουθες κεφαλίδες:
- «Προέλευση»: Αυτός πρέπει να είναι ο τομέας του πού προέρχεται το αίτημά σας.
-`Access-Control-Request-Method`: Αυτή θα πρέπει να είναι η μέθοδος HTTP που προσπαθεί να χρησιμοποιήσει το αίτημά σας.
-`Access-control-allow-origin`: Αυτό θα πρέπει να είναι το ίδιο με την κεφαλίδα` Origin 'ή "*".
-`Access-control-allow-methods`: Αυτό θα πρέπει να περιλαμβάνει τη μέθοδο από το` Access-Control-Request-Method` ή να είναι "*".
6. Ερμηνεύστε τις κεφαλίδες: Εάν οι κεφαλίδες που σχετίζονται με το CORs δεν είναι παρόντες ή οι τιμές τους δεν είναι αυτό που περιμένετε, τότε ο διακομιστής πιθανότατα δεν έχει ρυθμιστεί σωστά για να χειριστεί τα αιτήματα CORS.
7. Επιλύστε το ζήτημα: Με βάση τις κεφαλίδες που λείπουν ή λανθασμένες κεφαλίδες, θα πρέπει να ενημερώσετε τη διαμόρφωση του διακομιστή για να στείλετε τις κατάλληλες κεφαλίδες CORS. Αυτό μπορεί να περιλαμβάνει την ενημέρωση του κώδικα από την πλευρά του διακομιστή ή τις ρυθμίσεις εξισορρόπησης διακομιστή μεσολάβησης/φορτίου.
Χρησιμοποιώντας τα εργαλεία προγραμματιστή του προγράμματος περιήγησης για να επιθεωρήσετε τις κεφαλίδες αίτησης και απάντησης, μπορείτε να προσδιορίσετε γρήγορα τη βασική αιτία του ζητήματος CORS και να λάβετε τα απαραίτητα μέτρα για την επίλυση.
Αναφορές:[1] https://www.anycode.ai/tutorial/how-to-debug-javascript-cors-issues-using-the-browser-s-network-panel-to-inspect-http-headers
[2] https://stackoverflow.com/questions/20032037/way-to-debug-cors-errors
[3] https://httptoolkit.com/blog/how-to-debug-cors-errors/
[4] https://davidtruxall.com/misleading-cors-errors/
[5] https://developer.genesys.cloud/forum/t/cors-error-in-dev-tools/7970