Pourquoi ma demande CORS Localhost échoue-t-elle sur stackoverflow.com malgré les en-têtes de serveur corrects ?

Problème d'en-tête CORS Localhost

Malgré la configuration du serveur avec les en-têtes CORS appropriés, un utilisateur rencontre des difficultés à utiliser localhost comme origine dans son script client .

Serveur Configuration

Le serveur est configuré avec l'en-tête suivant :

Access-Control-Allow-Origin:http://localhost

Script client

Le script client utilise l'objet XMLHttpRequest faire une demande à 'http://stackoverflow.com/'.

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

Erreur

Cependant, la requête échoue avec l'erreur suivante :

XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Solution

Bien que la configuration du serveur semble correcte, le problème réside dans l'utilisation de « localhost » comme origine dans le script client.

Chrome ne prend pas en charge localhost pour les requêtes CORS en raison d'un bug marqué comme « WontFix » en 2014.

Solution de contournement

Pour éviter ce problème, utilisez un domaine résolu en 127.0.0.1, tel que 'localho.st', ou lancez Chrome avec l'indicateur '--disable-web-security' à des fins de test.

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!