Angular 12 创建新条目时报POST 403错误（无效CORS请求）

排查修复方案 #

API在Postman调用正常但前端返回403，可按以下优先级排查：

• 补全鉴权请求头
  403错误多为身份凭证缺失导致，你当前代码仅配置了Content-Type请求头，若接口需要登录权限访问，需补充Authorization鉴权字段，修改示例如下：

  // entry.service.ts 修改httpOptions配置，动态获取存储的token
  const httpOptions = {
    headers: new HttpHeaders({ 
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('token') // 替换为你实际存储token的key
    })
  };
  

• 处理CSRF防护拦截
  若后端使用Spring Security等默认开启CSRF防护的框架，Postman会自动携带Cookie中的CSRF令牌，前端未配置时会被拦截。
  开发调试可临时在后端关闭对应接口的CSRF校验；生产环境推荐在Angular的AppModule中导入HttpClientXsrfModule自动携带令牌：

  // app.module.ts 新增配置
  import { HttpClientXsrfModule } from '@angular/common/http';
  @NgModule({
    imports: [
      HttpClientXsrfModule.withOptions({
        cookieName: 'XSRF-TOKEN', // 替换为后端返回的CSRF cookie名
        headerName: 'X-XSRF-TOKEN'
      })
    ]
  })
  

• 校验CORS配置
  确认后端CORS规则已放通前端本地开发地址（默认是http://localhost:4200），允许POST请求方法，允许application/json类型的请求头。
• 修正路径与提交逻辑
  你当前配置的API路径包含空格编码%20(5)，建议调整后端部署的上下文路径，去掉空格和特殊字符避免解析异常。另外当前提交逻辑无论接口成功失败都弹出成功提示，调整为在请求回调中处理：

  // add-entry.component.ts 修改createEntry方法
  createEntry() {
    this.entry.addEntry(this.addNewEntry.value).subscribe({
      next: (result: any) => {
        this.alert = true;
        console.log("Get data from service", result)
      },
      error: (err) => {
        console.error("请求失败", err)
        // 可添加失败提示逻辑
      }
    })
    console.log(this.addNewEntry.value);
  }
  

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