Question d'entretien pour Développeur frontend

Votre fetch vers l'API échoue avec une erreur CORS dans le navigateur mais la même requête passe très bien en curl. Que se passe-t-il et que faites-vous ?

Ce que le recruteur cherche à évaluer, comment structurer votre réponse et un exemple parlé à adapter.

Réponse rapide

CORS est appliqué par le navigateur, pas par le serveur, donc curl ne le voit jamais. La requête a probablement atteint le serveur et la réponse n'avait simplement pas d'en-tête d'origine autorisée que le navigateur accepte, ou un préflight OPTIONS a échoué. Regardez dans l'onglet réseau la requête OPTIONS et ses en-têtes de réponse, vérifiez que l'origine, les méthodes et les en-têtes autorisés couvrent votre appel, et rappelez-vous que les identifiants exigent une origine explicite plus allow credentials, jamais un joker.

Pourquoi les recruteurs posent cette question

Tout développeur frontend tombe là-dessus, et la réponse révèle si vous comprenez le modèle de sécurité du navigateur ou si vous copiez une configuration de proxy jusqu'à ce que l'erreur disparaisse. Le recruteur veut entendre que CORS protège la réponse, qu'un préflight est déclenché par des méthodes, en-têtes ou types de contenu non simples, et que la correction appartient au serveur. Proposer de désactiver la sécurité web du navigateur est éliminatoire.

Comment structurer votre réponse

  • Dites que c'est le navigateur qui l'applique, ce qui explique que curl marche.
  • Séparez le préflight de la requête réelle dans l'onglet réseau.
  • Associez le message d'erreur précis à l'en-tête manquant.
  • Dites où se situe la correction et ce que vous demanderiez au backend.

Exemple de réponse

Exemple parlé, à la première personne

La première chose que je dis, c'est que CORS est une règle du navigateur, pas du serveur, donc le succès de curl ne m'apprend rien à part que l'endpoint répond. Le navigateur a fait la requête, ou un préflight pour elle, et a refusé de me donner la réponse parce que les en-têtes n'autorisaient pas mon origine. Donc j'ouvre l'onglet réseau et je cherche d'abord une requête OPTIONS. Si elle est là et renvoie un 4xx, c'est le préflight lui-même qui échoue, en général parce que j'ai ajouté un en-tête personnalisé ou un content type JSON qui l'a fait sortir de la catégorie des requêtes simples, et que la liste d'en-têtes autorisés du serveur ne l'inclut pas. S'il n'y a pas de préflight, alors c'est la réponse réelle à qui il manque un en-tête d'origine autorisée correspondant à la mienne. La correction est côté serveur. En développement local, je passe par un proxy sur le serveur de dev pour que mon origine corresponde, mais je m'assure que les vrais en-têtes sont configurés aussi, sinon ça casse en préproduction. Et si l'appel envoie des cookies, le serveur doit renvoyer une origine précise plus allow credentials, puisqu'un joker est rejeté dans ce cas.

Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.

Voir comment ça marche

Questions de relance à prévoir

  • Qu'est-ce qui rend une requête assez simple pour sauter le préflight ?
  • Pourquoi une origine joker ne fonctionne-t-elle pas avec des requêtes avec identifiants ?
  • Comment déboguer ça si l'onglet réseau ne montre aucune réponse ?

Autres questions pour Développeur frontend

Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.

Prédire mes questions

Répétez les questions difficiles avant qu'on vous les pose

Entraînez-vous avec un copilote en direct, puis présentez-vous prêt. Un Session Pass à $29 vous accompagne pendant l'entretien, sans abonnement et sans engagement.

Obtenir GhostPilot