Abrufen gibt einen leeren Antworttext

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

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 .then()Funktion leer ist und ich nicht sicher bin, warum. Ich habe Beispiele online überprüft und es sieht so aus, als ob mein Code funktionieren sollte, sodass mir hier offensichtlich etwas fehlt. Die Sache ist, wenn ich die Registerkarte "Netzwerk" in den Entwicklertools von Chrome ü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.

mit .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

In den Chrome Dev Tools suchen:

Ich bin gerade darauf gestoßen. Wie in dieser Antwort erwähnt , erhalten Sie mit using mode: "no-cors"eine opaque response, die anscheinend keine Daten im Körper zurückgibt.

undurchsichtig: Antwort auf "No-Cors" -Anforderung an eine Cross-Origin-Ressource. Stark eingeschränkt .

In meinem Fall habe ich verwendet Express. Nachdem ich cors for Express installiert und konfiguriert und entfernt hatte mode: "no-cors", wurde mir ein Versprechen zurückgegeben. Die Antwortdaten werden im Versprechen sein, z

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);
    });
  }
});

Sie müssen Ihre responsein konvertieren , jsonbevor Sie darauf zugreifen könnenresponse.body

Aus den Dokumenten

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

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
    });
  })

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 bei mir.

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;
});

Versuchen Sie, response.json () zu verwenden :

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); });

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

Vorderes Ende

Entfernen Sie "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, fügen Sie die CORS-Header hinzu, die den Ursprung angeben, von dem die Anfrage kommt. Wenn Sie sich nicht für den Ursprung interessieren, geben Sie den *Platzhalter an.

Die Rohantwort sollte einen solchen Header enthalten.

Access-Control-Allow-Origin: *

In vielen Fällen müssen Sie das bodyParser-Modul in Ihrer Express Node-App hinzufügen. Fügen Sie dann in Ihrem App.use-Teil unten app.use(express.static('www')); diese 2 Zeilen hinzu app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());