Angular调用http.post提交名言时返回404 Not Found错误如何解决

• 后端服务地址配置错误：你当前请求的地址是http://localhost:4200/quote，4200是Angular本地开发服务的默认端口，请求直接打到了前端静态服务上，自然找不到后端接口，大概率是dbService.ts里的baseUrl为空或者配置成了前端服务地址，没有指向实际的后端服务端口。
• 后端接口路径不匹配：后端没有定义POST方法的/quote路由，可能是路径拼写错误（比如后端用了复数/quotes、自定义前缀/api/quote）、请求方法不对（后端只写了GET接口没写POST接口）。
• 本地开发未配置跨域代理：前端跑在4200端口，后端跑在其他端口的情况下，没有配置Angular代理转发规则，导致请求没有正确转发到后端服务。
• 后端服务未启动或异常：后端服务本身没有正常运行，或者端口被占用、路由配置没有生效。

1. 修正baseUrl配置
   打开services/dbService.ts，确认baseUrl指向你的实际后端服务地址，比如后端跑在3000端口，配置如下：

// 示例配置，替换为你自己的后端地址
private baseUrl = 'http://localhost:3000/api/';

拼接后的完整请求地址应为http://localhost:3000/api/quote，而非前端4200端口的地址。

2. 验证后端接口可用性
   先通过Postman、Apifox或curl工具直接向后端发送POST /quote请求，传入JSON格式的请求体{"quote": "测试内容"}，确认接口能正常返回，排除后端本身的路由错误、服务未启动问题。

3. 配置本地开发代理（可选，解决跨域问题）
   如果是本地开发阶段不想直接写死后端IP端口，可以配置Angular代理转发：

• 在项目根目录新建proxy.conf.json，内容如下（替换target为你的后端地址）：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

• 修改angular.json中projects -> [你的项目名] -> architect -> serve -> options节点，新增配置：

"proxyConfig": "proxy.conf.json"

• 重启ng serve命令生效，之后baseUrl可以写为/api/，所有带/api前缀的请求都会自动转发到后端服务。

4. 检查接口参数格式
   确认后端要求的请求头、参数格式和你提交的一致，比如是否要求Content-Type: application/json，Angular的HttpClient默认会发送JSON格式，一般不需要额外配置，如果后端要求表单格式需要自行调整。

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