Anonymous
JavaScript -Backendausgabe: Unerwartetes Ende der JSON -Eingabe [geschlossen]
Post
by Anonymous » 03 Jun 2025, 17:12
Ich bin neu bei FullStack Development und ich versuche, Daten von meinem Frontend JavaScript an mein Backend zu senden. Für das Debuggen habe ich versucht, die Daten an den Frontend zurück zu senden, aber ich erhalte den Fehler "{Erfolg: Falsch, Fehler: 'Unerwartetes Ende von JSON Eingabe'}". < /P>
Hier ist mein Frontend -Code: < /p>
Code: Select all
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);
});
< /code>
Und hier ist mein Backend -Code: < /p>
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 });
}
};
< /code>
Es tut mir leid, wenn mein Code chaotisch ist ... < /p>
Wenn ich meine Anwendung testet, erhalte ich die folgende Fehlermeldung: < /p>
Data sent to backend: {team_name: 'wdefre', post_description: '•What we do\n•Your skills\n•Your profile\n•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
1748963522
Anonymous
Ich bin neu bei FullStack Development und ich versuche, Daten von meinem Frontend JavaScript an mein Backend zu senden. Für das Debuggen habe ich versucht, die Daten an den Frontend zurück zu senden, aber ich erhalte den Fehler "{Erfolg: Falsch, Fehler: 'Unerwartetes Ende von JSON Eingabe'}". < /P> Hier ist mein Frontend -Code: < /p> [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); }); < /code> Und hier ist mein Backend -Code: < /p> 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 }); } }; < /code> Es tut mir leid, wenn mein Code chaotisch ist ... < /p> Wenn ich meine Anwendung testet, erhalte ich die folgende Fehlermeldung: < /p> Data sent to backend: {team_name: 'wdefre', post_description: '•What we do\n•Your skills\n•Your profile\n•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 [/code]