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

【问题标题】：Angular http post request fails, but axios one worksAngular http post 请求失败，但 axios 1 有效
【发布时间】：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

标签： javascript angular http axios httpclient

【解决方案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()
);

开始工作

【讨论】：