Angular http post 请求失败，但 axios 1 有效

Posted 2023-03-31

【中文标题】Angular http post 请求失败，但 axios 1 有效

【英文标题】：Angular http post request fails, but axios one works

【发布时间】：2021-10-15 08:29:34

【问题描述】：

我正在使用 Angular 9 HttpClient 发出 POST 请求，但它失败了 '显示临时标题'

我的代码是这样的：

const header = 
  headers: new HttpHeaders(
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/x-www-form-urlencoded',
  )
;

const req = new HttpRequest('POST', url, bytes, 
  headers: header.headers,
  reportProgress: true,
);

return this.http.request(req).pipe(
  map((event) => 
    if (multyStepsUpload) 
      return;
    
    return this.reportUploadEvent(event, file);
  ),
  last()
);

同样的调用也适用于 AXios

return new Observable<any>((obs) => 
   axios.post(
    `$url`,
      bytes,
    
      headers: 
        'Content-Type': 'application/x-www-form-urlencoded',
      ,
    
  ).then((res) =>
    console.log(res) ;
    obs.next(res);
  ).catch((err) => 
    console.log(err) ;
    obs.next(err);
  );

这绝对是一些 Angular 配置，我尝试了一堆但没有任何效果。 有人可以就可能的问题以及如何将 Angular http 配置为像 axios 一样提供建议吗？

【问题讨论】：

我怀疑这是 CORS 问题。您不能在前端添加 Access-Control-Allow-Origin 标头：所有 CORS 问题都必须在后端修复。您可能忘记将 OPTIONS 添加到允许的请求动词中。您需要 OPTIONS 浏览器飞行前请求（服务器和 Postman 不这样做）。

您是否尝试过滤事件？尝试添加 if(event.type == HttpEventType.Response) return this.reportUploadEvent(event, file); .

您是在浏览器中还是在 Node.js 中运行 AXIOS 代码？

能否请您添加完整的错误

这能回答你的问题吗："CAUTION: provisional headers are shown" in Chrome debugger

【参考方案1】：

由于很头疼，我想通了。该问题与 CORS 有关，它失败了，因为 Angular HTTP 已将 OPTIONS 发送到服务器。我只是发出一个没有任何标题且没有 reportProgress: true 的请求，

就这样

const req = new HttpRequest(method, url, bytes);

return this.http.request(req).pipe(
  map((event) => 
    if (multyStepsUpload) 
      return;
    
    return this.reportUploadEvent(event, file);
  ),
  last()
);

开始工作