I don't seem to find any missed end input. This is the error that I recieve:
Uncaught (in promise) SyntaxError: Unexpected end of input
at fetch.then.response (InventoryOnHand.js:33)
Below is my code: I have a value for the url.
fetch(url + "GetItemMasterList", { 'mode': 'no-cors' })
.then(response => response.json())
.then(function (data) {
console.log(data)
});
This is a well known problem with CORS policy. To overcome this problem you need access rights to the server side API. In particular, you have 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;
});
Related
I am using Sandbox for payment testing. Everything works fine till payment and the console throws an error:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
The error points to:
fetch(url, {
. I am not sure what's wrong with the Django app. I even have initialized URL at the top:
var url = "{% url 'payments' %}"
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
console.log(details);
sendData();
function sendData(){
fetch(url, {
method : "POST",
headers: {
"Content-type": "application/json",
"X-CSRFToken": csrftoken,
},
body: JSON.stringify({
orderID: orderID,
transID: details.id,
payment_method: payment_method,
status: details.status,
}),
})
.then((response) => response.json())
.then((data) => {
window.location.href = redirect_url + '?order_number='+data.order_number+'&payment_id='+data.transID;
})
}
});
}
Either there is an internal server error, or you the server is not sending a Json response. You can check the status by using .then((response)=>console.log(response.status) to check if there is an internal server error, if the console.log shows 500 error code, then it is server error. else the server is not sending proper json response.
You are probably not returning json from the server, try doing res.text() instead of res.json(), and see if that fixes it, if it does, you are not returning proper json from your server.
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.
I'm creating a registration system for a university project. This is using fetch to post the data from the form to a PHP file.
I want to transfer over a $message variable that is echoed at the bottom of my PHP page to know if the registration has been successful, or if an error message has occurred. If I can see that the $message equals my success string, I think I can do an if statement using window.location.href like below? Currently it is redirecting the page for any successful fetch, no matter what the response from PHP is.
I've tried using header("Location: /index.html"); in my PHP file on the success line, but this also didn't work for me. I've spent hours looks for a solution but I really can't get my head around how to pass this variable over.
var myJSON = JSON.stringify(userDetails);
fetch("url/register.php", {
method: "POST",
mode: "no-cors",
cache: "no-cache", /
credentials: "same-origin",
headers: {
"Content-Type": "application/json"
},
redirect: "follow",
referrer: "no-referrer",
body: myJSON
}).then((response) => {
if (response.ok) {
return response.blob();
} else {
throw new Error("Things went poorly.");
}
}).then((response) => {
//Fetch was successful!
window.location.href = "url/index.html";
}).catch((error) => {
console.log(error);
});
You can try this in your php file:
$response = [ message => "the message", success => true ];
echo json_encode($response);
You will receive a JSON response which you will use it to validate if the request was successful.
In your javascript code, you have to parse this JSON response to an literal object like:
fetch(url, {params})
.then(response => response.json())
.then((response) => {
if (response.success) {
// fetch was succesfull!
} else {
// response.message could be used to show what was wrong
throw new Error(response.message);
}
})
One way to accomplish this is to use the URL's query parameters to pass the success message. For example:
window.location.href = "url/index.html?login=success";
Then on the .html page you would have code that looks for the login query parameter and displays something if it's equal to success.
I have a JavaScript that makes a Fetch post call to the backend of the site. If the post-call goes well, the Fetch is able to handle the response. If something goes wrong in the post-call, the Fetch is not able to handle the error.
This are my codes:
async function startFetch(url, data_post){
return fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data_post), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
})
.then(response => response.json());
}
async function makeFetch(arrRows){
let url = 'somebackendpost';
for(const item of ArrRows){
let data_post = {};
data.name = item;
await startFetch(url, data_post)
.then(data => {
//when the fetch is okay, this part is executed
console.log(data);
//do other things like output to html
$('#result').append('<p>' + data.result + '</p>');
})
.catch(error ={
//a timeout 504 error occured, but this part seemed not to execute
console.log('error is', error);
//the code below is wrong (but has since been removed then)
//Is this the reason why the catch error part did not work?
//Since the code below has been removed, can I expect the catch error to now work?
$('#result').append('<p>' + data.result + '</p>');
});
}
}
function startProcess(){
//called by button click
let arrRows = ["Row1", "Row2", "Row3"];
makeFetch(arrRows);
}
At the time, the code was executed, there was a server issue. The browser console displayed a Gateway timeout error 504. Here is the console logs:
Fetch failed loading: POST "mysite/somebackendpost"
POST mysite/somebackendpost 504 (GATEWAY TIMEOUT)
error is SyntaxError: Unexpected end of JSON input
at fetch.then.response
Uncaught (in promise) ReferenceError: X is not defined
at startFetch.then.catch.error
Try updating your startFetch method to first check that the fetch response is "ok" before attempting to parse the response as json. This will catch most error scenarios (that are currently going undetected), before you attempt to parse json.
So, an update as follows should allow you to respond to errors correctly:
async function startFetch(url, data_post){
return fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data_post), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
})
.then(response => {
// Check that the response is valid and reject an error
// response to prevent subsequent attempt to parse json
if(!response.ok) {
return Promise.reject('Response not ok with status ' + response.status);
}
return response;
})
.then(response => response.json());
}
Hope this helps!
I am getting a similar error from (here)[Getting "TypeError: failed to fetch" when the request hasn't actually failed
My method is annotated with #CrossOrigin
With postman my request works fine ( from locally)
see POST to http://star-is.info:8080/app-1.0.0-BUILD-SNAPSHOT/register with headers Content-Type application/x-www-form-urlencoded and passing a string with firstname
Locally works fine but my form (here)[http://star-is.info:8082/] does not
const data = {};
data['firstname'] = this.state.firstname;
console.log('submitSignup');
fetch('http://localhost:8080/app-1.0.0-BUILD-SNAPSHOT/register', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((response) => response.json()
.catch(err => {
console.err(`'${err}' happened!`);
return {};
})).then(function (body) {
console.log(body);
})
.catch(error => {
alert(error);
});
Now I am getting a reply from server
{firstname: null}
but why is firstname not being passed to the server..
The way i achieved this much as using register as endpoint to call in fetch
and using proxy in package.json
I removed JSON.stringify with the data and still it is null
See with postman I get the same string back
I even tried this
const data = {'firstname' : this.state.firstname};
it is still returned null
Finally it works. I had to encode the data being sent. Is there a better way to do this in Reactjs for more complex objects
const searchParams = Object.keys(data).map((key) => { return encodeURIComponent(key) + '=' + encodeURIComponent(data[key]); }).join('&');
And then use searchParams in the body of fetch