I am using fetch() to grab data from api server. My error looks like this:
Uncaught (in promise) SyntaxError: Unexpected end of input at
fetch.then.blob.
Can you please tell me what am I doing wrong.
const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
mode: 'no-cors'
}).then(blob => blob.json())
.then(data => console.log(data))
A response for a no-cors request to a cross-origin resource has a response type of 'opaque'. If you log the response before trying to turn it to JSON, you will see a type of "opaque".
Opaque types are listed as "severely restricted" as explained in the fetch spec on whatwg.org.
An opaque filtered response is a filtered response whose type is "opaque", url list is the empty list, status is 0, status message is the empty byte sequence, header list is empty, body is null, and trailer is empty.
They cannot currently be read when the type is opaque as explained on Google's docs on the opaque type.
An opaque response is for a request made for a resource on a different origin that doesn't return CORS headers. With an opaque response, we won't be able to read the data returned or view the status of the request, meaning we can't check if the request was successful or not. With the current fetch() implementation, it's not possible to make requests for resources of a different origin from the window global scope.
This can be environment-dependent or language-dependent. For example, you can change CORS settings within Nginx's environment by changing your server config, or you can specify headers within your application code such as in PHP.
I highly recommend reading the Mozilla documentation on CORS requests and also Access-Control-Allow-Origin.
An example in PHP:
<?php
header("Access-Control-Allow-Origin: *"); // "*" could also be a site such as http://www.example.com
I had the same problem. in my case it wasn't caused by the response type of 'opaque' as the solution pointed. This code cause an error with empty response, because 'fetch' doesn't accept responses with empty body :
return fetch(urlToUser, parameters)
.then(response => {
return response.json()
})
.then((data) => {
resolve(data)
})
.catch((error) => {
reject(error)
})
Instead, in my case this works better :
return fetch(urlToUser, parameters)
.then(response => {
return response.text()
})
.then((data) => {
resolve(data ? JSON.parse(data) : {})
})
.catch((error) => {
reject(error)
})
Gettting the text doesn't give the error even with the empty body. Then check if data exists and resolve. I hope it helps :-)
Lots of good responses but I chose this:
const response = await fetch(url, {
method: 'GET',
headers: {
Authorization: 'Bearer ' + accessToken
}
});
const string = await response.text();
const json = string === "" ? {} : JSON.parse(string);
return json;
You need to have in the header of php or another server endpoint the row:
<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');
// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);
// Use $jsonObj
print_r($jsonObj->message);
...
// End php
?>
Model of working fetch code with POST request is:
const data = {
optPost: 'myAPI',
message: 'We make a research of fetch'
};
const endpoint = 'http://example.com/php/phpGetPost.php';
fetch(endpoint, {
method: 'POST',
body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
console.info('fetch()', response);
return response;
});
(for people coming later but dealing with this problem "Unexpected end of JSON input")
The problem in many times is server error or just invalid URL but you can't see it because all examples on internet how to work with fetch are missing one important part - the server or network failure.
The correct way how to deal with fetch is to test response if contains errors before conversion to json.
Check the part of the first then in example where resp.ok is tested:
async function fetchData() {
return await fetch('https://your-server.com/some-NOt-existing-url/')
.then(resp => {
if (!resp.ok) {
throw `Server error: [${resp.status}] [${resp.statusText}] [${resp.url}]`;
}
return resp.json();
})
.then(receivedJson => {
// your code with json here...
})
.catch(err => {
console.debug("Error in fetch", err);
setErrors(err)
});
}
Adding to Pibo's answer...
I dont know how this happened, but I solved it just by changing
return fetch(url, {
mode: "no-cors" // <----------------
})
.then((res)=>{
return res.text();
})
.then((data)=>{
console.log(data);
return new Promise((resolve, reject)=>{
resolve(data ? JSON.parse(data) : {})
})
})
to
return fetch(url, {
mode: "cors" // <----------------
})
.then((res)=>{
return res.text();
})
.then((data)=>{
console.log(data);
return new Promise((resolve, reject)=>{
resolve(data ? JSON.parse(data) : {})
})
})
You met with the CORS origin policy problem. To tackle this you need rights to access the server side API. In particular, you need to add a line in the header of php or another server endpoint:
<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');
// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);
// Use $jsonObj
print_r($jsonObj->message);
...
// End php
?>
Also, make sure NOT to have in the header of your server endpoint:
header("Access-Control-Allow-Credentials" : true);
Model of working fetch code with POST request is:
const data = {
optPost: 'myAPI',
message: 'We make a research of fetch'
};
const endpoint = 'http://example.com/php/phpGetPost.php';
fetch(endpoint, {
method: 'POST',
body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
console.info('fetch()', response);
return response;
});
unexpected end of input
// .then((response) => response.json()) . // commit out this part
https://github.com/github/fetch/issues/268
fetch(url, {
method: 'POST',
body: JSON.stringify(requestPayload),
headers: {
'Content-type': 'application/json; charset=UTF-8',
Authorization: 'Bearer ' + token,
},
})
// .then((response) => response.json()) . // commit out this part
.then((json) => {
console.log("response :- ", json);
getCheckedInTrailersList();
}).catch((error)=>{
console.log("Api call error ", error.message);
alert(error.message);
});
As an alternative to @Pibo's solution, instead of fixing the fetch() at client side, you can fix it at server side by checking the nullity of your return value and change it to {} (or [] if an array is expected).
Below is an example for Node.js:
site.get("/api/get-industries", (req, res) => {
db.accountDB.getPresetData("Industries")
.then((result) => {
// If the result is null, return an empty array instead.
res.send(result ? result : []);
})
.catch((error) => {
res.status(500).send(error);
});
});
express.js as the server side, you can fix this problem with the below codes.
server.js
const express = require('express');
const app = express();
app.use(function (req, res, next) {
// fix CORS bug ✅
res.header("Access-Control-Allow-Origin", "*");
next();
});
app.get('/image', async (req, res) => {
const url = `https://cdn.xgqfrms.xyz/logo/icon.png`;
const json = {
url,
}
res.json(json)
});
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`app is running on http://localhost:${port}`)
});
client.js
const url = `http://localhost:3000/image`
const res = await fetch(url).then(res => res.json())
console.log(`res`, res, typeof res)
// res {url: 'https://cdn.xgqfrms.xyz/logo/icon.png'} object
@KevBot save me. I meet the problem accidentally. The request method works all along but it failed suddenly. Now I know it is because I add the 'no-cors' option to fetch method. I request multiple api. Some need the option some don't. So I modified my code like the following:
// determine whether add mode option to fetch method
const option =is_outer? {
mode: 'no-cors'
} : {};
ret = fetch(url, option).then(data => {
if (url.endsWith('txt')) {
return data.text()
} else {
const j = data.json();
...
