Docker部署的Angular调用Spring Boot API出现URL自动拼接前缀405报错问题

你在Angular中编写的请求URL没有携带http://或https://协议头，浏览器会将这类无协议的URL识别为相对路径，自动拼接在当前前端页面的源地址（也就是http://192.168.30.4:4300）之后，最终生成了你看到的错误请求地址。
同时你看到的405报错不是后端返回的：请求实际发到了托管Angular静态资源的服务上，这类服务默认不支持处理POST请求，因此返回了方法不允许的错误。

• 方案1：直接补全协议头（快速验证用）
  修改请求代码，给后端地址加上http://前缀即可：

this.httpClient.post<Tokens>("http://192.168.30.4:8081/login", user, {observe: "response"}).subscribe({…})

• 方案2：配置环境变量管理后端地址（标准开发规范）
  在Angular的environment.ts（开发环境）和environment.prod.ts（生产环境）中分别配置对应的后端地址前缀，避免硬编码写错，也方便后续切换部署环境：
  开发环境示例：

// environment.ts
export const environment = {
  production: false,
  backendBaseUrl: 'http://192.168.30.4:8081'
};

请求代码修改为：

this.httpClient.post<Tokens>(`${environment.backendBaseUrl}/login`, user, {observe: "response"}).subscribe({…})

• 方案3：配置Nginx反向代理（生产环境推荐）
  生产环境不建议直接暴露后端服务端口，还存在跨域风险，可以在托管Angular的Nginx配置中添加反向代理规则，将所有/api前缀的请求转发到后端8081端口，此时请求只需要写相对路径/api/login即可，同时自动解决跨域问题，无需额外配置Spring Boot的CORS规则。

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