Angular 應用程序無法從 Cloudfare 后面支持 CORS 的站點獲取數據

Question

我在從 Angular 訪問啟用 CORS 的站點時遇到問題。 通過瀏覽器從端點獲取JSON數據沒有問題，但是從Angular獲取它是不可能的。 一直顯示問題：

CORS 策略已阻止從源“http://localhost:4200”訪問“***”處的 XMLHttpRequest：請求的資源上不存在“Access-Control-Allow-Origin”標頭。

這是我的服務：

export class GetService {
  private url = '***'
  headers = new HttpHeaders({ 'Access-Control-Allow-Origin': '*' });

  constructor(private http: HttpClient) { }

  getList(): Observable<List[]> {
    return this.http.get<List[]>(this.url + 'list/', { headers: this.headers });
  }

我已經試過了：

• 如上所示，將標題 Access-Control-Allow-Origin 設置為 * （我也嘗試不使用標題）
• 檢查其他標頭設置（主機、用戶代理等）
• 內置代理

而且還是什么都沒有。 使用內置代理，我得到了其他錯誤：

請啟用cookies。 錯誤 1003 Ray ID：*** • 2021-10-31 15:54:16 UTC 不允許直接 IP 訪問 發生了什么？ 您請求了一個屬於 Cloudflare 網絡的 IP 地址。 必須提供有效的 Host 標頭才能訪問所需的網站。 我能做什么？ 如果您有興趣了解有關 Cloudflare 的更多信息，請訪問我們的網站。 Cloudflare Ray ID：*** • 您的 IP：*** • Cloudflare 的性能和安全性

我仍然可以通過直接向瀏覽器輸入端點地址來獲取數據，所以我假設，我必須以某種方式欺騙端點，瀏覽器正在連接到它，而不是 Angular 應用程序。 我能做什么？

Answer 1

您沒有在客戶端（角度）上設置 'Access-Control-Allow-Origin': '*' 在服務器上設置它。

如果您可以控制服務器，請將其添加到您的服務器中。

如果您無法控制服務器，則創建一個角度代理配置。

需要在所有環境中的所有 Web 服務器上重復此代理配置。