javascript - Varför fungerar inte min http://localhost CORS-origin?

Jag sitter fast med det här CORS-problemet, trots att jag har ställt in servern (nginx/node.js) med rätt headers.

Jag kan se i Chrome Nätverkspanel -> Svarshuvuden:

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

vilket borde göra susen.

Här är koden som jag nu använder för att testa:

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

Jag får

XMLHttpRequest kan inte ladda http://stackoverflow.com/. Ursprung http://localhost är inte tillåten av Access-Control-Allow-Origin.

Jag misstänker att det är ett problem i klientskriptet och inte i serverkonfigurationen...

Svar #1

Chrome stöder inte localhost för CORS-förfrågningar (en bugg öppnad 2010, markerad som WontFix 2014).

För att kringgå detta kan du använda en domän som localho.st (som pekar på 127.0.0.1 precis som localhost) eller starta Chrome med flaggan --disable-web-security (förutsatt att du bara testar).

Svar #2

Enligt @Beau:s svar stöder inte Chrome CORS-förfrågningar till localhost, och det är osannolikt att det sker någon förändring i denna riktning.

Jag använder Chrome-tillägget Allow-Control-Allow-Origin: * för att kringgå detta problem. Tillägget lägger till de nödvändiga HTTP-huvudena för CORS:

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

Källkoden är publicerad på Github.

Observera att tillägget filtrerar alla URL:er som standard. Detta kan orsaka problem på vissa webbplatser (till exempel: Dropbox). Jag har ändrat det till att endast filtrera localhost-URL:er med följande URL-filter

*://localhost:*/*

Svar #3

Inga av tilläggen fungerade för mig, så jag installerade en enkel lokal proxy. I mitt fall https://www.npmjs.com/package/local-cors-proxy Det är en 2-minuters installation:

(från deras webbplats)

npm install -g local-cors-proxy
API-slutpunkt som vi vill begära som har CORS-problem: https://www.yourdomain.ie/movies/list
Starta Proxy: lcp --proxyUrl https://www.yourdomain.ie
Sedan i din klientkod, ny API-slutpunkt: http://localhost:8010/proxy/movies/list

Fungerade som en charm för mig: din app ringer proxyn, som ringer servern. Inga CORS-problem.

Svar #4

Det verkliga problemet är att om vi sätter -Allow- för alla förfrågningar (OPTIONS & POST), kommer Chrome att avbryta det. Följande kod fungerar för mig med POST till LocalHost med 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);
} 
?>

Svar #5

Chrome kommer att göra förfrågningar med CORS från en localhost-ursprung utan problem. Detta är inte ett problem med Chrome.