前端注册请求遇CORS策略错误，附前后端代码求技术协助

报错信息翻译 #

signup:1 从源 'http://localhost:3000' 访问 'http://localhost:3001/api/auth/signup' 时被CORS策略阻止：对预检请求的响应未通过访问控制检查：'Access-Control-Allow-Origin' 头的值 'http://localhost:3000/' 与提供的源不匹配。请让服务器发送带有有效值的头，或者如果不透明响应满足你的需求，请将请求的模式设置为 'no-cors' 以禁用CORS来获取资源。
auth.store.jsx:23
POST http://localhost:3001/api/auth/signup net::ERR_FAILED

核心问题与修复方案 #

1. 修复后端CORS配置的两处错误 #

• Origin地址不匹配：后端配置的origin: "http://localhost:3000/"带了末尾斜杠，而前端实际请求源是http://localhost:3000（无斜杠），CORS会严格匹配地址，导致校验失败。
• 参数拼写错误：配置项Credential: true是大写C，正确参数名应为credentials（全小写），拼写错误会导致带凭证的请求不被允许。

修改后的后端CORS配置代码：

app.use(cors({ origin: "http://localhost:3000", credentials: true }));

2. 修复前端请求头的拼写错误 #

前端代码中"Content-Type": "aplication/json"拼写错误，应为application/json（缺少字母p），该错误会导致后端无法正确解析请求体，同时可能干扰预检请求的正常处理。

修改后的前端请求头部分：

headers: { "Content-Type": "application/json" },

3. 可选：修正后端端口日志（不影响功能） #

后端代码中console.log("Server is Running in Port 3000");与实际监听的3001端口不符，建议修正为：

console.log("Server is Running in Port 3001");

完成以上修改后，重启后端服务，重新测试注册请求即可解决CORS问题。

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