fetch gives an empty response body
I just ran into this. As mentioned in this answer, using mode: "no-cors"
will give you an opaque response
, which doesn't seem to return data in the body.
opaque: Response for “no-cors” request to cross-origin resource. Severely restricted.
In my case I was using Express
. After I installed cors for Express and configured it and removed mode: "no-cors"
, I was returned a promise. The response data will be in the promise, e.g.
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);
});
}
});
You will need to convert your response
to json
before you can access response.body
From the docs
fetch(url)
.then(response => response.json())
.then(json => {
console.log('parsed json', json) // access json.body here
})
This requires changes to the frontend JS and the headers sent from the backend.
Frontend
Remove "mode":"no-cors"
in the fetch options.
fetch(
"http://example.com/api/docs",
{
// mode: "no-cors",
method: "GET"
}
)
.then(response => response.text())
.then(data => console.log(data))
Backend
When your server responds to the request, include the CORS headers specifying the origin from where the request is coming. If you don't care about the origin, specify the *
wildcard.
The raw response should include a header like this.
Access-Control-Allow-Origin: *