Spring Boot+Security+React+Redux架构下注册请求网络异常问题：Postman正常但React端创建用户后无响应报错

从你的描述来看，Postman请求正常但前端抛出NetworkError，且数据库已成功写入用户，说明请求已经成功到达后端并执行了业务逻辑，但前端在响应处理环节出了问题，或者后端的响应存在浏览器不兼容的情况。下面分点给出排查和解决步骤：

1. 修复前端Fetch响应处理的核心错误 #

你的signupApi代码里有一个明显的问题：直接对fetch返回的Response对象调用JSON.parse(resp)是错误的——Response是包含响应元信息的对象，不是JSON字符串，必须通过异步方法resp.json()来解析响应体。

修改后的signupApi代码：

export const signupApi = async (payload) => {
  try{
    const resp = await fetch("/api/auth/signup",{
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type':'application/json',
      },
      body : JSON.stringify(payload)
    });
    
    // 先校验HTTP响应状态是否正常（200-299区间）
    if (!resp.ok) {
      throw new Error(`请求失败，状态码：${resp.status}`);
    }
    
    const data = await resp.json(); // 正确解析JSON响应体
    console.log("SIGNUP RESP : ", data);
    return data; // 记得返回数据给Saga处理
  }catch(e){
    console.log("SIGN UP ERROR", e);
    throw e; // 重新抛出错误，让Saga的catch块能捕获到
  }
}

这里需要注意：

• resp.json()是异步操作，必须加await
• 先判断resp.ok可以提前捕获后端返回的错误状态码（比如400、500）
• 错误捕获后要重新抛出，否则Saga无法感知到请求失败

2. 检查后端CORS配置的完整性 #

虽然请求已经到达后端，但浏览器的跨域政策可能在响应阶段拦截不符合要求的返回。确保Spring Boot后端配置了正确的CORS规则，允许前端http://localhost:3000的请求：

可以通过全局配置类实现：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:3000"); // 指定允许的前端域名
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

也可以在注册接口的控制器方法上添加@CrossOrigin(origins = "http://localhost:3000")注解，实现局部CORS配置。

3. 确认后端是否正确返回响应体 #

检查后端的注册接口，确保处理完用户创建逻辑后，返回了标准的JSON响应，而非空响应或非JSON格式内容：

示例后端代码：

@PostMapping("/api/auth/signup")
public ResponseEntity<?> registerUser(@Valid @RequestBody SignupRequest signUpRequest) {
    // 执行用户注册逻辑（创建用户、写入数据库）...
    
    // 返回包含成功信息的JSON响应
    return ResponseEntity.ok(new MessageResponse("用户注册成功！"));
}

如果后端返回void、未添加@ResponseBody或ResponseEntity，浏览器会因无法解析响应内容而抛出NetworkError。

4. 完善Saga的错误处理逻辑 #

修改signupApi后，确保Saga能正确接收返回数据或捕获错误：

function* signupAsync(action){
  try {
    console.log("i made it before calling be")
    const resp = yield call(signupApi,action.data);
    console.log("i made it after calling be", resp);
    yield put(signupRequestSuccessAction(resp));
  } catch (e){
    console.log("Caught the error :", e);
    // 可以在这里派发请求失败的action，让Reducer更新状态
    // yield put(signupRequestFailureAction(e.message));
  }
}

总结 #

最可能的根源是前端解析Fetch响应的方式错误，先修复这个问题，再依次排查CORS配置和后端响应格式的问题，修改后应该能正常接收后端的响应了。

内容的提问来源于stack exchange，提问作者Geoffry Abi Farah