Angular10 - XHR 加载失败：POST - 浏览器阻止对同名域的 HTTP 请求答案

【问题标题】：Angular10 - XHR failed loading: POST - Browser blocks HTTP Request to domain of identical nameAngular10 - XHR 加载失败：POST - 浏览器阻止对同名域的 HTTP 请求
【发布时间】：2020-12-05 22:59:18
【问题描述】：

我有一个由 Django REST API 和 Angular 10 前端 SPA 组成的网页。一般来说，我可以毫无问题地向我的后端发送 GET-、POST-、PUT- 和 DELETE-XHR 请求，我只有一个 API 端点，我的 SPA 请求以某种方式被明确地取消。该问题发生在 Chrome 和 Firefox 上，并且似乎与浏览器无关。我在 google chrome 中收到的错误消息是：

zone-evergreen.js:2845 XHR 加载失败：POST "https://www.aldrune.com/wiki1/api/timestamp/"。

这是我们掌握的相关信息：

HTTP 请求在由浏览器或 SPA 构造后被取消（以下信息来自 chrome 网络选项卡）
在 Chrome 的网络选项卡中重新启动 HTTP 请求会从后端返回正确的响应，证明 HTTP 请求对象构造正确
后端工作正常（基于 2. 并且我可以通过邮递员成功发送 HTTP 请求）
它不能与 CORS 相关，因为 SPA 和我的后端都是从同一个 HTTP 服务器 (Apache2) 提供的。即使这还不够，Django 当前配置为允许所有来源。

与此问题有关的其他问题的原因是无意重新加载页面，从而中断了 AJAX 请求。但是当通过createTimestamp() 创建请求时，我的组件中的任何内容都不应触发页面重新加载。该组件从字面上获取 HTML 所需的 2 个输入 DOM 元素并构建要自己发送的对象。不涉及表单提交。

//session-audio.component.html
...
            <!-- Timestamp Create Form -->
            <div [ngClass]="{'d-none': !timestampCreateState, 'row my-1': timestampCreateState}">
                <input type="text" name="time" #timestampTimeInput />
                <input type="text" name="title" #timestampNameInput />
                <div>
                    <i class="icon hover-red fa fa-1-5x fa-times mx-1" (click)="cancelTimestampCreateState()"></i>
                    <i class="icon hover-green fa fa-1-5x fa-check mx-1" (click)="createTimestamp(timestampTimeInput, timestampNameInput)"></i>
                </div>
            </div>
...

//session-audio.component.ts
export class SessionAudioComponent implements OnInit {
...
  createTimestamp(timestampTimeInput: any, timestampNameInput: any){
    this.timestamp_model.time = this.stringToTime(timestampTimeInput.value);
    this.timestamp_model.name = timestampNameInput.value;
    //session_audio is set during initialization of this.timestamp_model

    this.timestampService.createTimestamp(this.timestamp_model).subscribe(timestamp => {
      this.timestamps.unshift(timestamp);
      this.timestampCreateState = false;
    }, error => console.log(error)).unsubscribe();
  }

}

我最好的猜测是它与组件有关，但是什么？

【问题讨论】：

标签： javascript angular ajax http xmlhttprequest

【解决方案1】：

该错误确实是由请求被中断引起的，在这种情况下是由于 observable 在完成向后端的请求之前被取消订阅。问题发生在我的组件的createTimestamp() 函数中。我省略了订阅中的回调函数以强调我的观点::

 this.timestampService.createTimestamp(this.timestamp_model).subscribe(...).unsubscribe();

课程：

不要在订阅后立即取消订阅 observable。那会打断你的电话。

如果您想要在获得第一个值后取消订阅的单次使用 Observable，请使用到处推荐的默认方法：使用 rxjs pipe 方法和 first() 运算符。

  createTimestamp(timestampTimeInput: any, timestampNameInput: any){
    this.timestamp_model.time = this.stringToTime(timestampTimeInput.value);
    this.timestamp_model.name = timestampNameInput.value;
    //session_audio is set during initialization of this.timestamp_model

    this.timestampService.createTimestamp(this.timestamp_model).pipe(first()).subscribe(timestamp => {
      this.timestamps.unshift(timestamp);
      this.timestampCreateState = false;
    }, error => console.log(error));
  }

【讨论】：