Postman请求Java Spring后端正常但React fetch请求失败，错误在哪？

云上老周

2026-9-27

问题原因及对应解决方法

表单默认提交行为中断请求
你的提交按钮放在<form>标签内部，浏览器默认会将form内未指定type的button识别为submit类型，点击后会触发表单默认提交、刷新页面，异步fetch请求还未执行完成就被中断。
修复方案二选一：
1. 给注册函数添加阻止默认行为逻辑：
```
function register(e){
  e.preventDefault(); // 新增这行
  // 原有fetch逻辑
}
```
1. 给按钮指定type为普通按钮：
```
<button type="button" onClick={register}>SIGN UP</button>
```
后端未配置CORS跨域许可
Postman没有同源策略限制，所以请求可以正常执行，但浏览器会自动拦截不同源（前端端口一般是3000、后端是8080，端口不同属于跨域）的请求，除非后端明确配置允许前端域名访问。
Spring修复方案：在你的AuthController类或者对应的注册接口方法上添加@CrossOrigin(origins = "http://localhost:3000")注解即可，生产环境可以换成实际的前端域名。

请求参数硬编码未读取输入内容
你当前代码里的请求体是固定写死的userName: 'Pala'和password: 'sibop'，没有读取用户在输入框填写的内容，无法正常传递用户输入的注册信息。
修复示例：

function register(e){
  e.preventDefault();
  const userName = document.getElementById('userName').value;
  const password = document.getElementById('password').value;
  fetch('http://localhost:8080/auth/register',{
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ userName, password })
  }).then(res => res.json()) // 新增响应解析逻辑
  .then(data => console.log("Result: ", data))
  .catch(err => console.log("Error: ", err))
}