跨浏览器与设备的前后端数据接收异常问题求助

问题描述 #

使用Spring Boot搭建后端API、React开发前端的项目中，出现前后端数据接收不一致的问题：部分浏览器能成功传输数据，其他浏览器及智能手机端则无法正常接收数据。

CORS配置代码 #

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
                .allowedHeaders("Origin", "Content-Type", "Accept")
                .allowCredentials(true);
    }
}

提交API代码 #

@PostMapping("/submitForm")
public ResponseEntity<Student> handleSubmit(@RequestBody Student student) {
    if (repository.existsByEmail(student.getEmail())) {

        Student errorStudent = new Student();
        errorStudent.setEmail(student.getEmail());
        errorStudent.setStudentName(student.getStudentName());
        errorStudent.setErrorMessage("Duplicate Email Buddy");

        return ResponseEntity.status(HttpStatus.CONFLICT).body(errorStudent);
    } else {
        Student student1 = repository.save(student);
        return ResponseEntity.ok(student1);
    }
}

React前端代码 #

const baseURL = "http://localhost:8080/api";
const sendDataToBackend = (data) => {
    axios
    .post(`${baseURL}/submitForm`, data)
    .then((response) => {
        console.log("Data sent successfully", response.data);
        setNotification("Data sent successfully");
    })
    .catch((error) => {
        console.error("Error sending data to the backend", error);

        if (error.response) {
            console.log("Error response details:", error.response.data);
            setNotification(
                `Error: ${error.response.status} - ${error.response.data.message}`
            );
        } else if (error.request) {
            console.log("Error with request:", error.request);
            setNotification("Error with the request. Please try again.");
        } else {
            console.log("Other error details:", error.message);
            setNotification("Error submitting form. Please try again.");
        }
    });
};

const handleChange = (e) => {
    setFormData({
        ...formData,
        [e.target.name]: e.target.value,
    });
};
const handleSubmit = (e) => {
    e.preventDefault();
    sendDataToBackend(formData);
    setFormData({
        studentName: "",
        fatherName: "",
        lastName: "",
        dob: "2023-12-01",
        course: "",
        bloodGroup: "",
        gender: "",
        email: "",
        password: "",
    });
};

已尝试的排查步骤 #

• 检查网络连接与服务器日志，排查错误；
• 验证API端点配置，确保可处理入站数据；
• 在不同浏览器与设备上测试前端，定位问题；
• 检查前端代码，确保数据传输无逻辑错误；
• 排查防火墙或安全设置是否干扰数据传输。

预期结果 #

希望所有支持的浏览器及智能手机端都能稳定地将前端数据传输至后端。

问题修复方案 #

1. 修正CORS配置 #

原CORS配置存在两个关键问题：

• addMapping("/api")仅匹配/api根路径，无法覆盖/api/submitForm这类子路径，需改为addMapping("/api/**")；
• 当设置allowCredentials(true)时，allowedOrigins("*")违反浏览器安全规则，必须指定具体前端域名（如本地开发的http://localhost:3000），生产环境替换为实际前端域名；
• 补充更多允许的请求头，避免部分浏览器自定义头被拦截。

修改后的CORS配置：

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:3000") // 替换为你的前端实际域名
                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); // 预检请求缓存时长，减少重复请求
    }
}

2. 前端请求优化 #

• 显式指定Content-Type为application/json，确保跨浏览器兼容性：

const sendDataToBackend = (data) => {
    axios
    .post(`${baseURL}/submitForm`, data, {
        headers: {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-cache' // 避免手机端缓存旧请求
        }
    })
    // ... 后续代码不变
};

• 检查表单字段名与后端Student实体类属性名是否完全一致（大小写敏感），比如前端的studentName必须和后端实体类的属性名完全匹配。

3. 后端实体类检查 #

• 确保Student实体类有无参构造函数，Spring Boot通过@RequestBody解析JSON时需要无参构造实例化对象；
• 确认所有需要接收的属性都有对应的getter和setter方法，否则无法完成数据注入。

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