前端React代码中，fetch 请求使用了相对路径 /signup。这意味着浏览器会将请求发送到当前页面所在的域名和端口下的 /signup 路径。如果前端和后端运行在不同的端口或域名下，或者后端路由配置不正确，就会导致404错误。
要解决这个问题，需要确保前端 fetch 请求使用的URL是完整的、指向后端API的URL。
解决方案：使用完整的URL
在React组件的 handleSubmit 函数中，修改 fetch 请求的URL，使用完整的URL，包括协议、主机名和端口号。例如，如果你的后端服务器运行在 localhost:4000 上，则应将URL修改为 http://localhost:4000/signup。
const handleSubmit = (event) => { event.preventDefault(); // Create a FormData object to send the form data const formData = new FormData(); formData.append('name', name); formData.append('password', password); formData.append('image', image); formData.append('address', address); // Send the form data to the backend fetch('http://localhost:4000/signup', { // 修改为完整的URL method: 'POST', body: formData, }) .then((response) => { if (response.ok) { console.log('Form submitted successfully'); // Reset the form fields setName(''); setPassword(''); setImage(null); setAddress(''); } else { console.error('Error submitting form'); } }) .catch((error) => { console.error('Network error:', error); });};
注意事项：
端口号: 确保URL中的端口号与后端服务器监听的端口号一致。环境变量: 在实际项目中，建议将后端API的URL存储在环境变量中，方便配置和部署。部署环境: 在生产环境中，URL应该指向部署后的域名或IP地址。
CORS问题
除了URL问题，跨域资源共享（CORS）也可能导致请求失败。如果前端和后端运行在不同的域名下，浏览器会阻止跨域请求。
表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。
74 查看详情
解决方案：
后端配置: 在Express.js后端使用 cors 中间件允许跨域请求。
const express = require("express");const app = express();const cors = require('cors');app.use(cors()); // 启用CORS
总结
解决MERN Stack用户注册表单404错误的关键在于确保前端 fetch 请求使用了正确的URL，指向后端API的注册路由。同时，需要注意CORS问题，确保后端允许跨域请求。通过检查URL和CORS配置，可以有效地解决此类问题。
更多关于CORS的信息，可以参考：How to solve CORS request did not succeed in express.js when react client try fetch data?
以上就是解决MERN Stack用户注册表单404错误的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/229636.html
微信扫一扫 
支付宝扫一扫 
