Pourquoi mon serveur API sur un sous-domaine ne répond-il pas avec l'en-tête « Access-Control-Allow-Origin » malgré une configuration CORS appropriée ?

Échec de l'accès au sous-domaine à partir du domaine principal : aucun en-tête « Access-Control-Allow-Origin »

Le problème survient lorsque vous essayez de accéder à un serveur API hébergé sur un sous-domaine à partir d'une application React sur le domaine principal. Lors de l'utilisation de CORS (Cross-Origin Resource Sharing) pour la communication entre origines, le serveur doit envoyer l'en-tête « Access-Control-Allow-Origin » pour spécifier quels domaines sont autorisés à accéder.

Définition du problème

Vous avez rencontré une erreur de politique CORS en essayant d'accéder à l'API depuis l'application React, avec le message d'erreur « Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. ". Malgré l'utilisation de différentes approches pour définir le middleware CORS, notamment l'utilisation de la bibliothèque gin-contrib/cors et l'ajout manuel de l'en-tête, l'erreur persiste.

Solution

Il s'avère que le problème ne réside pas dans la configuration CORS côté serveur mais dans les paramètres de votre groupe cible AWS Load Balancer. Vous aviez précédemment défini le protocole sur HTTPS dans le groupe cible, même si vous n'aviez fourni que des certificats ACM à Route 53 et ALB. Une fois que vous avez remplacé HTTPS par HTTP dans le groupe cible, le problème a été résolu et l'API est devenue accessible depuis l'application React.

Débogage des problèmes CORS

Pour diagnostiquer CORS- problèmes liés, il est crucial d'examiner la demande de contrôle en amont à l'aide de Chrome DevTools ou d'un outil dédié tel que cURL. Vérifiez l’en-tête de réponse de contrôle en amont pour vous assurer que l’en-tête « Access-Control-Allow-Origin » attendu est présent. Si la réponse indique un code d'état autre que 204 No Content, cela peut signaler un problème avec la réponse côté serveur ou son interprétation par le client.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!