Angular-JSON放置和刪除返回403（但郵遞員應用程序運行良好）

Question

我有一個REST API，可以使用post和get請求。 但是，當我要使用放置和刪除請求時，它會返回錯誤403。而且，當我嘗試使用Postman應用程序（用於JSON請求的應用程序）放置和刪除時，一切都很好。 我真的很困惑。 讓我用一些屏幕截圖來證明問題。 （為了安全起見，我檢查了鏈接，對此表示抱歉）

---

Chrome控制台； 郵遞員應用程序；

---

我的任何看跌代碼；

  /** PUT: update the firm on the server */
updateFirm (firm: Firm): Observable<any> {
 console.log(firm);

 return this.http.put(this.firmUrl+"put/"+String(firm.id), firm, httpOptions).pipe(
   tap(_ => console.log(`updated firm id=${firm.id}`)),
   catchError(this.handleError<any>('updateFirm'))
 );
}

---

如果您能幫助我，我將不勝感激。 祝你有美好的一天

Answer 1

我遇到了類似的情況，發現Angular 2在POST完成之前執行了OPTIONS方法！ “訪問控制允許方法”中缺少選項。

如果我檢查您的日志，那么我認為您也應該允許OPTIONS：以angular和perl作為后端，我必須允許以下操作：

-“ Access-Control-Allow-Methods” =>'GET，POST，PATCH，DELETE，PUT，OPTIONS'，

Answer 2

代理可以解決您的問題。 一個不錯而又快速的解決方案是借用一個（例如https://cors-anywhere.herokuapp.com ）進行測試然后自己做。 這是一個例子：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  res;

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => {console.log(res); this.res = res; });
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'X-Requested-With': 'XMLHttpRequest'
    });
    return this.http.get('https://cors-anywhere.herokuapp.com/https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

Answer 3

看起來是CORS錯誤，您正在從本地主機上的本地計算機到其他URL上的后端執行http請求。 解決此問題的唯一方法是在后端允許來自不同來源的請求。 或者可能在本地計算機上運行后端。

Answer 4

您的問題是有關HTTP OPTIONS請求的CORS 。

確實，在執行HTTP PUT請求之前，您的客戶端必須發出一個OPTIONS請求，以便添加包含標題的httpOptions變量。

因此，您必須在服務器代碼中授權執行OPTIONS請求。