We Keep Coding

weird CORS problem caused by custom config for fetch

I was writing a little wrapper for fetch method in JavaScript (I am very aware of libs like Axios that can do the same thing). I got the idea from a blog post
My code looks like this
async function apiCall(
endpoint,
{ data, headers: customHeaders, ...customConfig } = {}
) {
console.log("endpoint", endpoint);
const config = {
method: data ? "POST" : "GET",
body: data ? JSON.stringify(data) : undefined,
headers: {
"content-type": data ? "application/json" : undefined,
...customHeaders
},
...customConfig
};
return window.fetch(endpoint, config).then(async (response) => {
if (response.ok) {
return response.json();
} else {
// By default, window.fetch will only reject a promise if the actual request itself failed (network error), not if it returned a "Client error response".
const error = await response
.json()
.catch(() => new Error("invalid json"));
return Promise.reject(error);
}
});
}
export function requestMovies(query) {
const endpoint = `${apiULR}?apikey=${API_KEY}&s=${encodeURIComponent(query)}`;
return apiCall(endpoint);
}
However, I encountered TypeError Failed to fetch which I believed is caused by CORS.
If I take out config from window.fetch as in
async function apiCall(
endpoint,
{ data, headers: customHeaders, ...customConfig } = {}
) {
return window.fetch(endpoint).then(async (response) => {
if (response.ok) {
return response.json();
} else {
// By default, window.fetch will only reject a promise if the actual request itself failed (network error), not if it returned a "Client error response".
const error = await response
.json()
.catch(() => new Error("invalid json"));
return Promise.reject(error);
}
});
}
The problem would be gone. Not sure which part exactly triggered this CORS problem...
Here is a live demo: https://codesandbox.io/s/charming-saha-4c2bh?file=/src/index.js

follow the data not given path:
the ternary goes into the false case
headers gets an entry content-type: undefined
the request gets this header added
request is rejected by api because it contains a content-type header (probably with the string 'undefined' in it)
Solution: Dont use a ternary here, and replace it with an if, to get rid of the undefined entry.
Also: read up on differences between null, undefined values and "has own property" in javascript objects

How to handle async fetch undesired result?

I have the following React Native client code:
confirmMatchRecord(userId, matchedUserData['userId'], matchRecordData['matchRecord']['matchWinner'], matchRecordData['matchType'], currentUserRating, matchedUserRating, matchData['_id'], matchRecordData['matchRecord']['_id'], airbnbRatingValue, true, new Date())
.then((results) => {
// Do stuff
})
.catch((error) => {
Alert.alert('Error', 'There was an issue with confirming the record. Please check your connection and/or try again later.');
});
And the following code in my confirmMatchRecord function:
export async function confirmMatchRecord(userId, matchedUserId, matchWinner, matchType, currentUserRating, matchedUserRating, matchId, matchRecordId, matchRating, matchConfirmed, timestamp) {
console.log('Attempting to record match');
info = { userId, matchedUserId, matchWinner, matchType, currentUserRating, matchedUserRating, matchId, matchRecordId, matchRating, matchConfirmed, timestamp }
const firebaseIdToken = await AsyncStorage.getItem('#firebaseIdToken')
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + firebaseIdToken },
body: JSON.stringify(info)
};
const response = await fetch(ngrokOrLocalhost + '/confirmmatchrecord', requestOptions)
if (response['Status']==='Failure') {
// throw new Error(`HTTP error! status: ${response.status}`);
throw new Error(400);
} else if (response['Status']==='Success') {
const data = await response.json()
return data
}
}
Server code:
router.post('/confirmmatchrecord', async (req, res) => {
// Do a lot of stuff
if (response==='Success') {
return res.status(200).json({'Status': 'Success'})
} else {
return res.status(400).json({'Status': 'Failure'})
console.log('Match record was not confirmed successfully');
}
When response['Status']==='Failure (sent by server) it throws an error 400 as you can see, I was hoping to trigger the .catch in the client code then. But that does not happen, because the client code continues to run on the .then part.
How should I do this instead? Not sure if using .catch here is even correct or if I should do this type of work another way.

You seem to be aware of the bit of a footgun in the fetch API (I write about it here) where fetch only rejects its promise on network errors, not HTTP errors, but your check is incorrect in a couple of ways:
It's status, not Status (capitalization matters), and
It's the HTTP code (400 for instance), not a string
The Response object provides a convenient ok flag that's true for any successful response and false otherwise, so:
const response = await fetch(ngrokOrLocalhost + '/confirmmatchrecord', requestOptions)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); // This will be "HTTP error! status: 400" if the HTTP error code is 400
}
const data = await response.json();
return data;
In a comment you've said:
My response['Status'] was checking for a custom server message I had sent (res.status(400).json({'Status': 'Failure'}), I updated the post with it. Not sure why it didn't catch that
Ah! Okay. The reason it didn't catch it is that you're looking for it on the Response object, but your JSON is in the response body.
I suspect you don't want to use your own Status anymore since you know about response.ok and response.status now, but if you ever do want to include your own information in an error response as JSON, you can do that. You'd do it like this:
const response = await fetch(ngrokOrLocalhost + '/confirmmatchrecord', requestOptions)
const data = await response.json(); // Expects JSON in *both* the success response and the error response
if (data.Status === "Failure") {
throw new Error(`HTTP error! status: ${response.status}`); // This will be "HTTP error! status: 400" if the HTTP error code is 400
}
return data;
But I'd stick with just the built-in ok and status for pure success/failure information. This could be handy if you wanted to provide more details of the failure, though.

Uncaught (in promise) SyntaxError: Unexpected end of input with JS [duplicate]

This question already has an answer here:
using of fetch API the unexpected end of input error occurr
(1 answer)
Closed 3 years ago.
On my client side, I simply want to aler the response I get from the server.
function displayItems()
{
fetch('http://ip_address:3000/users',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
mode:'no-cors'
})
.then((response) => {return response.json();})
.then((res) => { alert(res.message)})
}
On my server side, I have this simple code to respond to request
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.post('/', function(req, res, next) {
let obj = {message:'fsdfsdfsdfsd'}
res.send(obj);
console.log('server Reached')
});
module.exports = router;
After looking up other related problems, I am still unable to resolve this error: Uncaught (in promise) SyntaxError: Unexpected end of input.
Thank you in advance to those who look at this.

In addition to the no-cors problem Quentin pointed out with the duplicate (which he answers here), there are several other issues:
What you're sending isn't JSON:
res.send('Hello world'); // <=== This is plain text
...so response.json() would fail when trying to parse the response.
If you're just sending text like that, you'd use response.text() to read it instead of .json().
You're also not checking correctly for HTTP errors. It's not just you, almost everyone makes this mistake (which I've written up here), it's a flaw (IMHO) in the fetch API. To correctly check for errors and receive text (rather than JSON), see *** comments:
function displayItems()
{
fetch('http://172.30.117.7:3000/users',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
mode:'no-cors'
})
.then((response) => {
// *** Check for HTTP failure
if (!response.ok) {
throw new Error("HTTP status " + response.status);
}
// *** Read the text of the response
return response.text();
})
.then((message) => {
// *** Use the text
alert(message);
})
.catch((error) => {
/* ...*** handle/report error, since this code doesn't return the promise chain...*/
});
}
Alternately, if you wanted, you could send back JSON:
response.json({message: "Hi there"});
...and then on the client:
function displayItems()
{
fetch('http://172.30.117.7:3000/users',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
mode:'no-cors'
})
.then((response) => {
// *** Check for HTTP failure
if (!response.ok) {
throw new Error("HTTP status " + response.status);
}
// *** Read and parse the JSON
return response.json();
})
.then((res) => {
// *** Use the object
alert(res.message);
})
.catch((error) => {
/* ...*** handle/report error, since this code doesn't return the promise chain...*/
});
}
But again, all of that is aside from the primary problem Quentin pointed out with the duplicate.

Why fetch gives response like this?

I got this kind of response from fetch when I inspect it in the console, as shown in the picture. However, when i check from the devtool Network, it shows the correct error response. Any idea on how to deal with this?
export function loginRequest(data){
return (dispatch, getState) => {
let tmp = Object.assign({},data)
var request = new Request('https://aaa.com/json', {
method: 'POST',
mode: 'cors',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
fetch(request).then((res)=>{
alert(JSON.stringify(res))
dispatch({
type: types.LOGIN,
data: res
})
}).catch(err =>{
alert(JSON.stringify(err))
alert(err.errMsg)
dispatch({
type: types.LOGIN,
data: data
})
console.log(JSON.stringify(err))
})
}
}

You need to parse the response to JSON to see the response that matches what you see in the network tab.
fetch('//offline-news-api.herokuapp.com/stories')
// First you can deal with the response, checking status code, headers, etc.
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
// This is the line you are missing
return response.json();
})
// Now you will see the proper JSON response that should match
// what you see in the network tab.
.then(function(stories) {
console.log(stories);
});
When using fetch, you can see the raw response, which is what your screenshot seems to be, and then you can parse it to JSON to see the body of the response as you are expecting. This allows more fine-tuned control of error handling, responses, etc.

You can also use axios where you don't have to parse your response and don't have to manually reject if there's 400 errors, it will go to catch instead.

catching error body using axios post

I am sending a status code 422 from my backend code with response body which contains the description of the error. I am using axios post as below to post a request:
post: function(url, reqBody) {
const request = axios({
baseURL: config.apiUrl,
url: url,
headers: {
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('token')
},
method: 'POST',
data: reqBody,
responseType: 'json'
});
return request
.then((res) => {
return res;
})
.catch((error) => {
console.log(error);
return error;
})
}
The problem is when backend is returning error code 422, the error object I am catching has no information about response body. Is there any way I can retrieve the error text?

I had this same issue and the answer (as per Axios >= 0.13) is to specifically check error.response.data:
axios({
...
}).then((response) => {
....
}).catch((error) => {
if( error.response ){
console.log(error.response.data); // => the response payload
}
});
See here for more details.

The "body" of an AXIOS error response depends from the type of response the request had.
If you would like full details about this issue you can see this blogpost: How to catch the body of an error in AXIOS.
In summary AXIOS will return 3 different body depending from the error:
Wrong request, we have actually done something wrong in our request (missing argument, bad format), that is has not actually been sent. When this happen, we can access the information using error.message.
axios.get('wrongSetup')
.then((response) => {})
.catch((error) => {
console.log(error.message);
})
Bad Network request: This happen when the server we are trying to reach does not respond at all. This can either be due to the server being down, or the URL being wrong.
In this case, we can access the information of the request using error.request.
axios.get('network error')
.then((response) => {})
.catch((error) => {
console.log(error.request );
});
Error status: This is the most common of the request. This can happen with any request that returns with a status that is different than 200. It can be unauthorised, not found, internal error and more. When this error happen, we are able to grasp the information of the request by accessing the parameter specified in the snippets below. For the data (as asked above) we need to access the error.response.data.
axios.get('errorStatus')
.then((response) => {})
.catch((error) => {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
})

For those using await/async and Typescript
try {
const response = await axios.post(url, body)
} catch (error) {
console.log(error.response.data);
}

For react native it just worked for me
api.METHOD('endPonit', body)
.then(response => {
//...
})
.catch (error => {
const errorMessage = JSON.parse(error.request.response)
console.log(errorMessage.message)
})

We can check error.response.data as #JoeTidee said. But in cases response payload is blob type? You can get error response body with the below code.
axios({
...
}).then((response) => {
....
}).catch(async (error) => {
const response = error.response
if(typeof response.data.text === function){
console.log(await response.data.text()); // => the response payload
} else {
console.log(response.data)
}
});

I am returning a string from backend but expecting a json as response type. So I need to return an object instead of string for axios to process it properly.

In my case I wanted to retrieve a response 404 error message (body).
I got body with error.response.data but I couldn't display it because the type was ArrayBuffer.
Solution:
axios.get(url, { responseType: 'arraybuffer' }).then(
response => {...},
error => {
const decoder = new TextDecoder()
console.log(decoder.decode(error.response.data))
}
)
Related posts:
Converting between strings and ArrayBuffers