fetch gives an empty response body
JavascriptFetch ApiJavascript Problem Overview
I have a react/redux application and I'm trying to do a simple GET request to a sever:
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); });
The problem is that the response body is empty in the .then()
function and I'm not sure why. I checked examples online and it looks like my code should work so I'm obviously missing something here.
The thing is, if I check the network tab in Chrome's dev tools, the request is made and I receive the data I'm looking for.
Can anybody shine a light on this one?
EDIT:
I tried converting the reponse.
using .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); });
and with .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
Looking in the chrome dev tools:
Javascript Solutions
Solution 1 - Javascript
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);
});
}
});
Solution 2 - Javascript
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
})
Solution 3 - Javascript
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: *
Solution 4 - Javascript
You must read the response's body:
fetch(url)
.then(res => res.text()) // Read the body as a string
fetch(url)
.then(res => res.json()) // Read the body as JSON payload
Once you've read the body you will be able to manipulate it:
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
});
})
Solution 5 - Javascript
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;
});
This works for me.
Solution 6 - Javascript
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;
});
Solution 7 - Javascript
Try to use response.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); });
Solution 8 - Javascript
In many case you will need to add the bodyParser module in your express node app.
Then in your app.use part below app.use(express.static('www'));
add these 2 lines
app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());