Angular10 - XHR 加載失敗：POST - 瀏覽器阻止 HTTP 請求同名域

Question

我有一個網頁，其中包含一個 Django REST API 和一個 ZC31C335EF37283C451B18BA0DA1 前端 1DE1ZDD3。 通常，我可以毫無問題地將 GET-、POST-、PUT- 和 DELETE-XHR 請求發送到我的后端，我只有一個 API 端點，我的 SPA 請求以某種方式被明確地取消了。 該問題出現在 Chrome 和 Firefox 上，並且似乎與瀏覽器無關。 我在谷歌瀏覽器中收到的錯誤消息是：

zone-evergreen.js:2845 XHR 加載失敗：發布“https://www.aldrune.com/wiki1/api/timestamp/”。

這是我們掌握的相關信息：

1. HTTP 請求在由瀏覽器或 SPA 構造后被取消（以下信息來自 chrome 網絡選項卡）

2. 在 Chrome 的網絡選項卡中重新啟動 HTTP 請求會從后端返回正確的響應，證明 HTTP 請求 object 構造正確

3. 后端工作正常（基於 2. 並且我可以通過 postman 成功發送 HTTP 請求）

4. 它不能與 CORS 相關，因為 SPA 和我的后端都是由同一個 HTTP Server (Apache2)提供的。 即使這還不夠，Django 當前配置為允許所有來源。

與此問題有關的其他問題的原因是無意的頁面重新加載，這中斷了 AJAX 請求。 但是當通過createTimestamp()創建請求時，我的組件中的任何內容都不應觸發頁面重新加載。 該組件從字面上獲取 HTML 所需的 2 個輸入 DOM 元素，並構建要自行發送的 object。 不涉及表單提交。

//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();
  }

}

我最好的猜測是它與組件有關，但是什么？

Answer 1

該錯誤確實是由請求被中斷引起的，在這種情況下是由於 observable 在它甚至可以完成向后端發出請求之前被取消訂閱。 問題發生在我的組件的createTimestamp() function 中。 我在訂閱中省略了回調函數以強調我的觀點::

 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));
  }