fetch gibt einen leeren Antworttext zurück

Lesezeit: 5 Minuten

Benutzer-Avatar
Razvan Ilin

Ich habe eine React/Redux-Anwendung und versuche, eine einfache GET-Anfrage an einen Server zu stellen:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

Das Problem ist, dass der Antworttext in der leer ist .then() funktionieren und ich bin mir nicht sicher warum. Ich habe Beispiele online überprüft und es sieht so aus, als ob mein Code funktionieren sollte, also fehlt mir hier offensichtlich etwas. Die Sache ist, wenn ich den Netzwerk-Tab in den Chrome-Entwicklungstools überprüfe, wird die Anfrage gestellt und ich erhalte die Daten, nach denen ich suche.

Kann jemand ein Licht auf dieses werfen?

BEARBEITEN:

Ich habe versucht, die Antwort zu konvertieren.

verwenden .text():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

und mit .json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then((response) => {
  console.log(response.body);
  return dispatch({
    type: "GET_CALL",
    response: response.body
  });
})
.catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input

Blick in die Chrome-Entwicklertools:

Geben Sie hier die Bildbeschreibung ein

Benutzer-Avatar
RationalDev mag GoFundMonica

Ich bin gerade darauf gestoßen. Wie in dieser Antwort erwähnt, mit mode: "no-cors" gibt dir ein opaque responsedie anscheinend keine Daten im Körper zurückgibt.

undurchsichtig: Antwort auf „no-cors“-Anfragen an Cross-Origin-Ressourcen.
Stark eingeschränkt.

In meinem Fall habe ich verwendet Express. Nachdem ich installiert habe cors für Express und konfiguriert und entfernt mode: "no-cors", wurde mir ein Versprechen zurückgegeben. Die Antwortdaten werden im Promise stehen, zB

fetch('http://example.com/api/node', {
  // mode: 'no-cors',
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
},
).then(response => {
  if (response.ok) {
    response.json().then(json => {
      console.log(json);
    });
  }
});

  • Für mich war alles, was erforderlich war, hinzuzufügen .then(json => { am Ende meiner response.json() Aussage. Vielen Dank!

    – Mike Kellogg

    23. April 2018 um 1:22 Uhr


  • @MikeKellogg nur ein Hinweis, falls Sie Ihren Code aufgeräumt halten möchten, können Sie dies tun return response.json() und platzieren Sie die .then(json=> Teil zwischen der letzten Klammer und dem Semikolon. ).then(json=>{});

    – Razvan Ilin

    25. April 2018 um 19:26 Uhr

  • Es scheint, wenn Sie die Domäne weglassen und einen relativen URI verwenden, mit dem es funktioniert no-cors

    – Danny ‘365CSI’ Engelmann

    7. April 2020 um 8:12 Uhr

  • Ich habe AWS API Gateway verwendet und in meinem Lambda hat mir dieser Header gefehlt "Access-Control-Allow-Origin": "*" in der Antwort. Das hinzufügen und entfernen no-cors hat bei mir funktioniert.

    – Kentativ

    4. April 2021 um 1:19 Uhr


  • Für diejenigen, die gehofft hatten, das zu verlassen no-cors Modus aktiviert, um einige CORS-Einschränkungen zu umgehen, leider kann die undurchsichtige Antwort, die von diesen Arten von Anforderungen zurückgegeben wird, nicht analysiert werden. Ich war sehr verwirrt, weil ich die richtige Antwort in den Entwicklertools meines Browsers deutlich sehen konnte, aber sie kam nie zu meinem Code. Weitere Diskussionen zu diesem Thema finden Sie hier: stackoverflow.com/a/54906434/3513260

    – Furchtsammler

    5. Januar um 20:55 Uhr

Sie müssen Ihre konvertieren response zu json bevor Sie zugreifen können response.body

Von dem Dokumente

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('parsed json', json) // access json.body here
  })

  • Gute Antwort und danke für den Verweis auf die Dokumentation. Die Dokumentation zeigt auch, was zu tun ist, wenn Sie etwas anderes als JSON verwenden, z. B. Text – es kann das gleiche Verhalten anzeigen und die Lösung ist sehr ähnlich (verwenden Sie text() anstelle von json() ).

    – Polymeron

    3. Januar um 17:44 Uhr

Dies erfordert Änderungen am Frontend-JS und den vom Backend gesendeten Headern.

Frontend

Entfernen "mode":"no-cors" in den Abrufoptionen.

fetch(
  "http://example.com/api/docs", 
  {
    // mode: "no-cors",
    method: "GET"
  }
)
  .then(response => response.text())
  .then(data => console.log(data))

Backend

Wenn Ihr Server auf die Anfrage antwortet, schließen Sie die CORS-Header ein, die den Ursprung der Anfrage angeben. Wenn Ihnen die Herkunft egal ist, geben Sie die an * Platzhalter.

Die Rohantwort sollte einen Header wie diesen enthalten.

Access-Control-Allow-Origin: *

  • Dies sollte die 🔝Top-Antwort sein

    – GesamtAMD

    22. Mai um 4:25 Uhr


Sie müssen den Text der Antwort lesen:

fetch(url)
  .then(res => res.text()) // Read the body as a string

fetch(url)
  .then(res => res.json()) // Read the body as JSON payload

Sobald Sie den Körper gelesen haben, können Sie ihn manipulieren:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
  .then(response => response.json())
  .then(response => {
    return dispatch({
      type: "GET_CALL",
      response: response
    });
  })

Benutzer-Avatar
Ani Thettayl

fetch("http://localhost:8988/api", {
        //mode: "no-cors",
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        return data;
    })
    .catch(error => {
        return error;
    });

Das funktioniert für mich.

fetch("http://localhost:8988/api", {
    method: "GET",
    headers: {
       "Content-Type": "application/json"
    }
})
.then((response) =>response.json());
.then((data) => {
    console.log(data);
})
.catch(error => {
    return error;
});

Benutzer-Avatar
Damien Leroux

Versuchen zu benutzen Antwort.json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.json()); // null
  return dispatch({
    type: "GET_CALL",
    response: response.json()
  });
})
.catch(error => { console.log('request failed', error); });

1216500cookie-checkfetch gibt einen leeren Antworttext zurück

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy