React表单登录验证提交时请求URL返回404错误求助

Hey there, let's figure out why you're getting that 404 error with your login validation code and walk through fixes step by step:

A 404 error means the server can't find the resource you're requesting, so start here:

• Double-check that your backend service is actually running on localhost:3727—it's easy to mistype the port number.
• Verify the full route /api/Login/ValidateUser matches exactly what your backend exposes. Many frameworks (like ASP.NET Core) are case-sensitive with routes, so make sure capitalization matches (e.g., Login vs login).
• Test the endpoint directly with a tool like Postman or curl first: send a POST request to http://localhost:3727/api/Login/ValidateUser with form data userid=test&password=test. If this also returns 404, the problem is on the backend, not your frontend code.

Your current mode: 'no-cors' is blocking you from reading the response (and can cause unexpected behavior even on localhost). Remove it—cors is the default mode, which works if your backend has CORS configured. Also, fix the typos in your console log:

ValidateLogin(e) { 
  if(this.state.formValid) { 
    let userid = this.state.userId; 
    let password = this.state.password; 
    let url = "http://localhost:3727/api/Login/ValidateUser"; 
    fetch(url, { 
      method: "POST", 
      // Remove mode: 'no-cors'
      body : "userid=" + userid +"&password=" + password 
    })
    // Fixed: console.log (lowercase L) and correct response spelling
    .then((response) => console.log(response))
    .catch(err => console.error('Request failed:', err)); // Add catch to see errors
  } 
}; 

Right now, you're sending form data but not telling the server what format it's in. Add a Content-Type header, and use encodeURIComponent to handle special characters in user input:

ValidateLogin(e) { 
  if(this.state.formValid) { 
    const userid = this.state.userId; 
    const password = this.state.password; 
    const url = "http://localhost:3727/api/Login/ValidateUser"; 
    // Encode values to avoid issues with special characters
    const formData = `userid=${encodeURIComponent(userid)}&password=${encodeURIComponent(password)}`;
    
    fetch(url, { 
      method: "POST", 
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded', // Tell server it's form data
      },
      body: formData
    })
    .then((response) => {
      // Check if response is successful before processing
      if (!response.ok) {
        throw new Error(`Server returned status: ${response.status}`);
      }
      return response.json(); // Use response.text() if backend returns plain text
    })
    .then(data => {
      console.log('Login response:', data);
      // Handle successful login here
    })
    .catch(err => console.error('Login failed:', err));
  } 
}; 

Make sure your backend is configured to accept POST requests at that route:

• If you're using ASP.NET Core, check that your controller has [Route("api/[controller]")] and the ValidateUser method has [HttpPost("ValidateUser")] attribute.
• Confirm the backend isn't enforcing HTTPS (unless you're using https:// in your URL)—mixing HTTP/HTTPS can also cause unexpected errors.

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