web-dev-qa-db-fra.com

CORS mortel quand http: // localhost est l'origine

Je suis coincé avec ce problème CORS, même si je configure le serveur (nginx/node.js) avec les en-têtes appropriés.

Je peux voir dans Chrome volet Réseau -> En-têtes de réponse:

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

ce qui devrait faire l'affaire.

Voici le code que je utilise maintenant pour tester:

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

Je reçois

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

Je soupçonne que c'est un problème dans le script client et pas dans la configuration du serveur ...

javascripthtml5corsxmlhttprequestxmlhttprequest-level2
141
whadar

Chrome ne supporte pas localhost pour les demandes CORS (un bogue ouvert en 2010, marqué WontFix en 2014).

Pour contourner cela, vous pouvez utiliser un domaine tel que lvh.me (qui pointe vers 127.0.0.1 juste comme localhost) ou démarrer chrome avec le drapeau --disable-web-security (en supposant que vous testez simplement ).

195
Beau

Selon la réponse de @ Beau, Chrome ne prend pas en charge les demandes CORS localeshost, et il est peu probable qu'un changement intervienne dans cette direction.

J'utilise le Allow-Control-Allow-Origin: * Chrome Extension pour contourner ce problème. L'extension ajoutera les en-têtes HTTP nécessaires pour CORS:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

Le le code source est publié sur Github .

Notez que l'extension filtre toutes les URL par défaut. Cela peut casser certains sites Web (par exemple: Dropbox). Je l'ai changé pour ne filtrer que les URL localeshost avec le filtre suivant

*://localhost:*/*
43
Hanxue

Le vrai problème est que si nous définissons -Allow- pour toute requête (OPTIONS & POST), Chrome l'annulera. Le code suivant fonctionne pour moi avec POST to LocalHost avec Chrome

<?php
if (isset($_SERVER['HTTP_Origin'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_Origin']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>
19
greensuisse