Ionic 6 API REST POST请求遇CORS错误，无法连接API求助

先修正代码中的明显错误 #

你的服务代码存在一个关键问题：addStudent方法接收了data参数，但实际发送的请求体是硬编码的'hola'，完全没用到传入的用户数据，导致请求内容完全不符合预期。修正方式如下：

addStudent(data): Observable<any> {
  const headers = new HttpHeaders().append('Content-Type','application/json');
  // 直接传入data，Angular HttpClient会自动将其序列化为JSON格式
  console.log(data)
  console.log(headers)
  return this.http.post('MYAPIURL', data, {headers: headers});
} 

解决CORS预请求失败问题 #

报错的核心是浏览器发送的CORS预请求（OPTIONS请求）未返回2xx成功状态码，浏览器因此拦截了后续的POST请求。解决步骤如下：

1. 检查API服务器配置
   目标API服务器必须正确处理OPTIONS预请求：

   • 返回200或204状态码
   • 响应头中包含Access-Control-Allow-Origin: http://localhost:8100，允许你的前端域名跨域
   • 同时返回Access-Control-Allow-Methods: POST, OPTIONS和Access-Control-Allow-Headers: Content-Type，确保允许POST方法和指定的请求头

2. 开发环境临时绕过方案
   如果暂时无法修改API服务器配置，可以用Angular的代理功能绕过CORS限制：

   • 在项目根目录创建proxy.conf.json文件：

     {
       "/api": {
         "target": "MYAPIURL",
         "secure": false,
         "changeOrigin": true
       }
     }
     

   • 修改angular.json中的serve配置，添加代理文件路径：

     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "browserTarget": "你的项目名称:build",
         "proxyConfig": "proxy.conf.json"
       }
     }
     

   • 修改服务代码中的请求URL为相对路径：

     return this.http.post('/api', data, {headers: headers});
     

   • 重启Angular开发服务器

注意：代理方案仅适用于开发阶段，生产环境必须由API服务器配置正确的CORS规则。

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