I am new to fullstack development and I’m trying to send data from my frontend javascript to my backend. For debugging I tried to send the data back to the frontend, but I get the error “{success: false, error: ‘Unexpected end of JSON input’}”.
Here is my frontend code:
form.addEventListener("submit", async (e) => {
e.preventDefault();
const team_name = document.getElementById("team_name").value;
const post_description = document.getElementById("post-description").value;
const posts = postList;
const fullData = {
team_name,
post_description,
posts,
email: user_email
};
console.log("Data sent to backend:", fullData);
const res = await fetch("https://blue-heart-681f.alexandrosmostl.workers.dev/create_team", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(fullData)
});
const result = await res.json();
console.log("Backend Response:", result);
console.log("All user data from backend (data):", result.data);
});
And here is my backend code:
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
};
export default {
async fetch(request, env, ctx) {
const headers = {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
};
if (request.method === "OPTIONS") {
return new Response(null, { headers: corsHeaders });
}
const url = new URL(request.url);
const pathname = url.pathname;
if (request.method === "POST" && pathname === "/create_team") {
const headers = {
"Content-Type": "application/json",
...corsHeaders,
};
try {
let body;
try {
body = await request.json();
} catch (e) {
return new Response(JSON.stringify({ success: false, error: "Invalid JSON-Body" }), { headers });
}
const { team_name, email, post_description, posts } = body;
if (!team_name) {
return new Response(JSON.stringify({ success: false, error: "Team-Name is missing" }), { headers });
}
if (!email) {
return new Response(JSON.stringify({ success: false, error: "Email is missing" }), { headers });
}
if (!post_description) {
return new Response(JSON.stringify({ success: false, error: "post_description is missing" }), { headers });
}
if (!posts) {
return new Response(JSON.stringify({ success: false, error: "posts is missing" }), { headers });
}
const user = await supabaseGetUserByEmail(email);
if (!user) {
return new Response(JSON.stringify({ success: false, error: "User not found" }), { headers });
}
let currentTeams = {};
try {
currentTeams = user.leading_teams ? JSON.parse(user.leading_teams) : {};
} catch (_) {}
const baseId = team_name.toLowerCase().replace(/s+/g, "_").replace(/[^w]/g, "");
let uniqueId = baseId;
let counter = 1;
const existingIds = Object.values(currentTeams);
while (existingIds.includes(uniqueId)) {
counter++;
uniqueId = `${baseId}_${counter}`;
}
currentTeams[team_name] = uniqueId;
await supabaseUpdateUser(email, {
leading_teams: JSON.stringify(currentTeams)
});
return new Response(JSON.stringify({ success: true }), {
headers: {
"Content-Type": "application/json",
...corsHeaders
}
});
} catch (e) {
return new Response(JSON.stringify({ success: false, error: e.message }), { headers });
}
}
return new Response(JSON.stringify({ message: "POST only allowed with /signup, /additional or /login" }), { headers });
}
};
I’m sorry if my code is messy…
When i test my application, I get the following error message:
Data sent to backend: {team_name: 'wdefre', post_description: '•What we don•Your skillsn•Your profilen•What we offerwdew', posts: Array(1), email: '[email protected]'}
dashboard-script.js:88 Backend Response: {success: false, error: 'Unexpected end of JSON input'}
dashboard-script.js:89 All user data from backend (data): undefined
