Glitch平台Express服务器Fetch API POST请求JSON.parse错误求助

Hey there! Let's work through your issues step by step—since you're new to JavaScript/Express on Glitch, these are totally normal hurdles to hit, so don't stress.

1. 先搞清楚Fetch的URL指向哪里 #

This is a super common point of confusion for new Express devs. On Glitch, when testing your app (either via the preview button or your project's .glitch.me URL), you can use a relative path for your Fetch call.

For example:

• If you've defined a POST route in Express like app.post('/submit-form', ...), your Fetch URL should just be '/submit-form'.
• This tells the browser to send the request to the same domain your app is running on, which is exactly what you need. No full external URLs required unless you're calling a third-party API.

Double-check that your Express route path matches the URL you're using in Fetch—mismatched paths can cause silent failures or unexpected errors too.

2. 修复JSON.parse错误的核心步骤 #

That parse error almost always comes down to two key oversights: missing request headers, or not setting up Express to handle JSON correctly.

后端Express配置 #

First, you need to add the express.json() middleware before your routes. This tells Express to automatically parse incoming JSON request bodies. Skip this, and Express won't know how to handle the JSON you send—you'll get parsing errors or req.body will be undefined.

Add this line near the top of your server file:

app.use(express.json());

前端Fetch请求配置 #

On the frontend, you must set the Content-Type header to application/json. This tells Express that you're sending JSON data, so it knows to use the express.json() middleware to parse it. Without this header, Express might try to parse the body as form data or plain text, which will throw a JSON.parse error.

3. 正确处理表单输入数据 #

You mentioned your form input is saved as string variables but you can't use them. Chances are you're not wrapping those strings into a proper JSON object before sending.

Let's say you have two string variables from your form: username and email. Instead of sending them as separate strings, package them into an object first, then convert that object to a JSON string with JSON.stringify():

// Get form values as strings
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;

// Package into a JSON-friendly object
const formData = { username, email }; // Shorthand for { username: username, email: email }

// Now send it via Fetch
fetch('/submit-form', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // Don't forget this!
  },
  body: JSON.stringify(formData) // Convert object to JSON string
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

You said testing JSON.stringify and JSON.parse in the console works—so this step (packaging strings into an object before stringifying) is probably what you're missing when sending the actual request.

调试小技巧 #

If you're still stuck:

• Check your browser's Network tab: Look at the POST request, verify the Content-Type header is application/json, and the Body tab shows a valid JSON string.
• Log the request body on the backend: Add console.log('Received data:', req.body) in your POST route. If it's undefined, your express.json() middleware isn't set up correctly or the header is missing.

内容的提问来源于stack exchange，提问作者bzrkly