2016-11-02 2 views
2

gemacht Ich habe den folgenden Code, der whatwg fetch verwendet:sehr verwirrt durch cors mit und holen, wenn ein Optionsanforderung

const headers = new Headers(); 

    //uncommenting this causes the preflight options request to be sent 
    //headers.append('x-something', 'foo'); 

    const response = await fetch('http://localhost:5000/api/managers', { 
    headers, 
    credentials: 'include' 
    }); 

Der obige Code ein Preflight-Optionen macht nicht verlangen, es sei denn ich diese Zeile Kommentar-:

//headers.append('x-something', 'foo'); 

I haben die Server wie folgt konfiguriert, um die Anfrage zu ermöglichen localhost:

app.use(cors({ 
    origin: 'http://localhost:4040' 
})); 

Wenn ich die Anforderung mit der credentials: 'include' Möglichkeit Gebrauch machen, erhalte ich die folgende Fehlermeldung im Browser Chrome:

Fetch API nicht http://localhost:5000/api/managers laden kann. Anmeldeinformationen Flag ist 'wahr', aber die 'Access-Control-Allow-Credentials' Header ist ''. Es muss "wahr" sein, um Anmeldeinformationen zuzulassen. Origin 'http://localhost:4040' ist daher nicht zulässig.

Wenn ich credentials: 'include' entfernen, haben aber den benutzerdefinierten Header wie folgt aus:

headers.append('x-something', 'foo'); 

    const response = await fetch('http://localhost:5000/api/managers', { 
    headers 
    }); 

Dann wird das Chrom Netzwerk Registerkarte zeigt nur einen OPTIONS mit einem 204 No Content Antwort verlangen, obwohl eine JSON Antwort vom Server zurückgegeben wird.

Ich verstehe nicht, warum die Chrome-Netzwerkregisterkarte keine GET-Anforderung mit der JSON-Antwort zeigt, wie es passiert.

Die Anfrage und Antwort sieht wie folgt mit einem 204 keinen Inhalt Antwort:

Request URL:http://localhost:5000/api/managers 
Request Method:OPTIONS 
Status Code:204 No Content 
Remote Address:[::1]:5000 
Response Headers 
view source 
Access-Control-Allow-Headers:x-something 
Access-Control-Allow-Methods:GET,HEAD,PUT,POST,DELETE,PATCH 
Access-Control-Allow-Origin:http://localhost:4040 
Connection:keep-alive 
Date:Wed, 02 Nov 2016 21:23:24 GMT 
Vary:Accept-Encoding 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:x-something 
Access-Control-Request-Method:GET 
Cache-Control:no-cache 
Connection:keep-alive 
Host:localhost:5000 
Origin:http://localhost:4040 
Pragma:no-cache 
Referer:http://localhost:4040/base/winratio 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 
Name 
managers 
/api 
info?t=1478121804370 
/sockjs-node 

Wenn ich den Code machen einfach:

const response = await fetch('http://localhost:5000/api/managers', { 
    }); 

Dann wird das Google Chrome Registerkarte Netzwerk zeigt nur einen GET Anfrage mit einer 200 HTTP-Antwort und der JSON, den es zurückgibt:

Request URL:http://localhost:5000/api/managers 
Request Method:GET 
Status Code:200 OK 
Remote Address:[::1]:5000 
Response Headers 
view source 
Access-Control-Allow-Origin:http://localhost:4040 
Connection:keep-alive 
Content-Length:1104 
Content-Type:application/json; charset=utf-8 
Date:Wed, 02 Nov 2016 21:35:21 GMT 
Vary:Accept-Encoding 
X-Content-Type-Options:nosniff 
X-DNS-Prefetch-Control:off 
X-Download-Options:noopen 
X-Frame-Options:SAMEORIGIN 
X-XSS-Protection:1; mode=block 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Cache-Control:no-cache 
Connection:keep-alive 
Host:localhost:5000 
Origin:http://localhost:4040 
Pragma:no-cache 
Referer:http://localhost:4040/base/winratio 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36 
Name 
+0

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests erläutert – Phil

Antwort

Verwandte Themen