Tu so ključni koraki za odpravljanje napak v CORS z uporabo orodij za razvijalce brskalnika:
1. Odprite orodja za razvijalce: V večini brskalnikov lahko orodja za razvijalce odprete s pritiskom na F12 ali Ctrl+Shift+i. To bo odprlo ploščo za orodja za razvijalce.
2. Pojdite na zavihek Network: Poiščite zavihek "Network" v orodjih za razvijalce in kliknite nanj. To vam bo prikazalo vse omrežne zahteve na strani.
3. Opredelite zahtevo za neuspeh CORS: poiščite kakršne koli neuspele zahteve, ki so poudarjene v rdeči barvi. To so verjetno zahteve, ki niso uspele.
4. Preglejte glave zahteve: Kliknite neuspešno zahtevo, da vidite več podrobnosti. Nato pojdite na zavihek "Headers", da pregledate zahtevo in glave odzivov.
5. Preverite glave, povezane s CORS: Poiščite naslednje glave:
- `Origin`: To bi morala biti domena, od koder prihaja vaša zahteva.
-`Access-Control-Request-Method`: To bi morala biti metoda HTTP, ki jo vaša zahteva poskuša uporabiti.
-`Access-Control-Allow-Origin`: To bi moralo biti enako kot" Origin "glava ali"*".
-`Access-Control-Allow-Methods`: To bi moralo vključevati metodo iz` Access-Control-Request-Method` bodisi biti "*".
6. Razlaga glave: Če glave, povezane s CORS, niso prisotne ali njihove vrednosti niso tisto, kar pričakujete, potem strežnik verjetno ni pravilno konfiguriran za obravnavo zahtev COR.
7. Odpravite težavo: Na podlagi manjkajočih ali napačnih glav CORS boste morali posodobiti konfiguracijo strežnika, da boste poslali ustrezne glave CORS. To lahko vključuje posodobitev kode na strani strežnika ali nastavitve proxy/nalaganja nalaganja.
Z uporabo orodij za razvijalce brskalnika za pregled zahteve in glave odzivov lahko hitro prepoznate osnovni vzrok izdaje CORS in sprejmete potrebne ukrepe za njegovo rešitev.
Navedbe:[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