2016-06-06 12 views
13

Auf Anfrage so machen:kann nicht POST holen, ohne No-cors in Header

return fetch(
      'http://localhost:8000/login', 
      { method: 'POST', 
       headers: new Headers(
        {"Content-Type": "application/json", 
        "Accept":"application/json"} 
       ), 

       body: JSON.stringify(
        {'name': 'Tom', 'password': 'Soyer'} 
       ) 
      } 
      ).then(response => { console.log(response);}) 
      .catch(err => console.log(err)) 

Anfrage statt POST mit Methode OPTIONS ausgeführt wird. Nur auf Modus und fügt hinzu: "No-cors Antrag wurde POST:

return fetch(
      'http://localhost:8000/login', 
      { method: 'POST', 
       mode: 'no-cors', 
       headers: new Headers(
        {"Content-Type": "application/json", 
        "Accept":"application/json"} 
       ), 
       body: JSON.stringify(
        {'name': 'Tom', 'password': 'Soyer'} 
       ) 
      } 
      ).then(response => { console.log(response);}) 
      .catch(err => console.log(err)) 

aber Antwort nicht ok ist als (selbst wenn Netzwerk-Antwortstatus 200): {type: "undurchsichtig", url: "", Status : 0, ok: false, status: "" ...} ich es annehmen, weil

die einzige zulässige Werte für den Content-Type-Header sind: application/x-www-form-urlencoded multipart/form- Daten Text/Ebene

hier beschrieben https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Ist es möglich, POST JSON-Daten mit Fetch zu leben?

+3

Nun, nur a) keine Cross-Domain-HTTP-Anfragen machen oder b) beantworten sie mit den entsprechenden CORS-Header – Bergi

Antwort

13

Die benutzerdefinierte Content-Type Header Sie Ursachen Ihre Anfrage sind zu senden Preflight werden, was eine OPTIONS-Anforderung bedeutet, einige Metadaten über die POST-Anforderung enthält, die im Begriff ist, versandt werden soll, wird vor die tatsächliche POST-Anfrage gesendet werden.

Ihr Server muss vorbereitet sein, um mit dieser OPTIONS-Anfrage fertig zu werden. Sie haben nicht angegeben, was der Server geschrieben ist, aber mit ausdrücklicher zum Beispiel können Sie eine Middleware registrieren, die alle ‚OPTIONEN‘ fängt Anforderungen, legt die Access-Control-Allow-Origin: * und Access-Control-Allow-Headers: Content-Type Header, und antwortet mit 200

Wenn es möglich für Sie, um die Anfrage mit einem 'Content-Type': 'Text/plain' Header, die Ihr Problem lösen würde. Alternativ könnten Sie etwas verwenden, das XHR vollständig umgeht, wie JSONP.

1

Wenn Sie keine Kontrolle über Server haben, können Sie dies versuchen:

http://cors-anywhere.herokuapp.com/

+11

Routing Der Datenverkehr über einen unbekannten Reverse-Proxy scheint aus Sicherheits- und Datenschutzgründen keine geeignete Lösung zu sein. – Marmelatze

+4

sicher, aber zu Testzwecken kann dies als eine schnelle Lösung behandelt werden –

+0

@MarcinRapacz: Es wird nicht funktionieren, wenn Cookies für den ursprünglichen Server beteiligt sind. – user2284570