向Angular/Tomcat发送POST请求时出现403状态码问题

嘿，我之前也踩过一模一样的坑！Postman能正常跑但Angular发请求就403，大概率是浏览器的安全机制或者请求细节没和Postman对齐，咱们一步步排查：

1. 先查CORS跨域配置 #

Postman不受浏览器同源策略限制，但Angular在浏览器里发起跨域请求时，会先发送一个OPTIONS预检请求。如果你的Tomcat后端没正确配置CORS，没允许Angular所在域名（比如http://localhost:4200）的请求，也没放行OPTIONS方法，就会直接返回403。

• 打开浏览器控制台的Network面板，看看是不是OPTIONS请求先失败了；
• 解决方法：在Tomcat里配置CORS过滤器，允许你的Angular域名、POST/OPTIONS方法，以及必要的请求头。

2. 逐行核对请求头 #

Postman里的请求头要和Angular代码里的完全一致，差一个都可能出问题：

• 你用了JSON.stringify，一定要确保headers里设置了'Content-Type': 'application/json'，不然后端可能识别不了请求体，返回403；
• 检查有没有漏加后端要求的自定义头，比如Authorization、X-Requested-With这类；
• 补全你的headers代码示例参考：

  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    // 比如如果后端需要认证头，就加上：
    // 'Authorization': 'Bearer your-token-here'
  })
  

3. CSRF令牌问题 #

很多后端框架（比如和Tomcat搭配的Spring Boot）默认启用CSRF保护。Postman可能自动带上了Cookie里的CSRF令牌，但Angular里没处理：

• 解决：在Angular的AppModule里导入HttpClientXsrfModule，自动获取并发送CSRF令牌：

  import { HttpClientXsrfModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      HttpClientXsrfModule.withOptions({
        cookieName: 'XSRF-TOKEN', // 对应后端设置的Cookie名称
        headerName: 'X-XSRF-TOKEN' // 对应后端要求的请求头名称
      })
    ]
  })
  

• 同时检查浏览器Application面板里有没有对应的Cookie，如果没有，说明后端没正确设置CSRF令牌。

4. 核对请求体格式 #

虽然你用了JSON.stringify，但还是要对比Postman的请求体和Angular发送的是否完全一致：

• 打开浏览器Network面板，查看Request Payload，和Postman的Body对比，有没有大小写错误、多余空格或者参数名不匹配？比如后端要求FirstName但你传的是firstname；
• 你的params: {firstname,lastname,top,bottom}是ES6简写，确保变量名和后端接口要求的参数名完全一致。

5. 检查Tomcat的安全约束 #

看看Tomcat的web.xml里有没有配置security-constraint，如果某些路径需要特定角色才能访问，而Postman里你手动加了认证信息（比如Basic Auth），但Angular里没加，也会返回403：

• 如果是Basic Auth，Angular里可以这样加请求头：

  const auth = btoa('username:password');
  headers: new HttpHeaders({
    'Authorization': `Basic ${auth}`,
    'Content-Type': 'application/json'
  })
  

先从浏览器Network面板入手，对比Postman的请求细节，重点看预检请求、请求头、请求体这几个点，应该很快就能定位问题！

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