React JS调用JSON API时出现404(Not Found)错误求助

首先，404错误的核心原因几乎都是请求的资源路径不对，既然Postman能正常请求，那我们可以从「浏览器请求和Postman请求的差异」入手排查：

1. 先确认请求的URL是否完全正确 #

你在代码里用了${this.domain}/login，这里最容易出问题的是this.domain的值：

• 如果你在Postman里用的是完整URL（比如http://localhost:3001/login），那this.domain必须是http://localhost:3001，不能只写localhost:3001或者/api——因为浏览器会把相对路径拼在当前页面的URL后面，比如当前页面是http://localhost:3000/login，那相对路径localhost:3001/login会变成http://localhost:3000/localhost:3001/login，这肯定会404。
• 快速验证的方法：在login方法里加一行console.log(${this.domain}/login)，运行后看控制台输出的URL是不是和Postman里的完全一致。

2. 对比浏览器和Postman的请求细节 #

打开Chrome的「网络」面板，找到那条404的请求，查看以下信息：

• Request URL：是不是和Postman里的请求URL完全相同？（包括协议、域名、端口、路径）
• Request Method：是不是POST？（如果API只接受POST请求，方法错了也会404）
• Request Headers：检查Content-Type是不是application/json？（你的代码里已经设置了，但有时候合并options时可能被覆盖，得确认实际发送的请求头）
• Request Payload：是不是正确的JSON格式？比如{"username":"你的用户名","password":"你的密码"}？（Postman里你传的是JSON，所以浏览器里的payload也得一致）

3. 检查Fetch方法的配置细节 #

你的fetch方法里有个细节：{ headers, ...options }，这里要注意如果options里也包含headers，会覆盖你默认设置的headers。不过你的login方法里没传额外headers，所以这部分应该没问题，但可以确认一下最终的请求头是否正确。

另外，如果你是跨域请求（比如React在3000端口，API在3001端口），还要确认API服务器是否配置了正确的CORS规则——不过CORS错误一般是403或者控制台提示跨域，而不是404，所以优先级放在URL之后。

4. 补充建议 #

如果以上都没问题，可以试试把login方法里的URL直接写成Postman里的完整URL（比如http://localhost:3001/login），跳过this.domain拼接，看看能不能正常请求。如果能，那问题肯定出在this.domain的赋值上。

最后，也可以检查一下你的_checkStatus方法，确保它没有错误地处理响应状态码，但这不会导致404，只是可能影响后续的错误提示。

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