使用Java和React开发用户输入存库Web应用时遭遇POST请求404错误求助

嘿，我明白你现在的困扰——用React做前端、Java做后端开发存数据的Web应用，结果POST请求一直报404，这确实挺闹心的。结合你给出的React代码片段，我帮你梳理几个最可能的问题点和排查方向，咱们一步步来解决：

1. 先确认请求URL完全匹配 #

404本质就是找不到目标资源，所以第一步先盯紧请求的路径：

• 打开浏览器的Network面板，找到你的POST请求，看完整的请求URL是不是和Java后端接口的路径完全一致。比如前端请求的是/api/addCreditCard，后端Controller的@PostMapping是不是也是这个路径？注意Java里路径是区分大小写的，别出现大小写不匹配的情况。
• 别忘了检查端口号！如果你的Java后端跑在8080端口，前端请求的时候是不是带上了这个端口？比如应该是http://localhost:8080/api/addCreditCard，而不是直接写/api/addCreditCard（如果前端和后端不在同一个端口的话）。

2. 检查Java后端Controller的配置 #

后端接口的注解配置错了也会导致404，这是很常见的坑：

• 确认你的Controller类上有没有加@RestController（或者@Controller+@ResponseBody），如果没加，Spring会把请求当成页面跳转，自然找不到对应的接口。
• 检查请求方法的注解：你用的是POST请求，后端是不是用了@PostMapping？或者@RequestMapping(method = RequestMethod.POST)？要是不小心写成了@GetMapping，那POST请求过来肯定找不到资源。
• 前端传的是JSON格式的参数，后端方法里有没有用@RequestBody注解来接收？比如：

// 示例代码
@RestController
@RequestMapping("/api")
public class CreditCardController {
    @PostMapping("/addCreditCard")
    public ResponseEntity<String> addCreditCard(@RequestBody CreditCardDTO cardData) {
        // 这里处理存数据库的逻辑
        return ResponseEntity.ok("卡片信息保存成功");
    }
}

这里的CreditCardDTO类要和你前端传的card_data字段对应，字段名要一致，或者用@JsonProperty来做映射。

3. 确保前端请求的格式正确 #

前端发送POST请求时，要是请求头或者请求体格式不对，也可能导致后端识别不了接口：

• 如果你用的是原生fetch，一定要设置Content-Type: application/json请求头，不然后端解析不了JSON格式的请求体。比如补全你的React代码：

addCreditCard(event) {
    event.preventDefault();
    const card_data = {
        cardholder: this.refs.cardholder.value,
        cardnumber: this.refs.cardnumber.value,
        card_identifier: this.refs.cardnumber.value.substr(15),
        expiration: this.refs.expiration.value,
        cvc: this.refs.cvc.value
    };

    fetch('/api/addCreditCard', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(card_data)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('请求出错');
        }
        return response.json();
    })
    .then(data => console.log('保存成功:', data))
    .catch(error => console.error('错误:', error));
}

• 另外提一句：React里的this.refs已经是过时的写法了，建议换成createRef（类组件）或者useRef（函数组件），不过这个和404错误没关系，只是个代码优化点~

4. 最后检查后端服务状态 #

确认你的Java后端服务是不是正常启动了，端口有没有被其他程序占用。可以试试直接在浏览器里访问后端的GET接口（如果有的话），看能不能正常响应，先排除服务本身没跑起来的问题。

按照上面的步骤排查，应该能找到404的根源啦！

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