了解CORS 錯誤：「無法從主域存取子網域：無「Access-Control-Allow-Origin」」

跨來源資源共享(CORS)是一種允許不同域相互互動的機制。當 API 伺服器在子網域上執行且 React 應用程式在主網域上執行時，可能會出現 CORS 錯誤，例如「無法從主網域存取子網域：No 'Access-Control-Allow-Origin'」錯誤。

調查問題

檢查 Chrome DevTools 中的預檢請求，以檢查快取的回應和預檢請求。使用像curl這樣的工具執行預檢請求，記得加入-i選項來輸出回應頭。

案例分析

• 案例1：這個方法利用預設的 CORS 配置，此配置啟用通配符來源。然而，測試表明它可以正常工作。
• 案例 2：自訂允許的來源、方法和標頭也證明是成功的。
• 案例 3：手動處理 CORS 標頭是另一個可行的解決方案。

解決問題

AWS 負載平衡器目標群組中的配置錯誤（基於OP 的解決方案）

此特定問題的根本原因是AWS 負載平衡器目標群組中的設定錯誤。即使未提供適當的 SSL 證書，目標群組的協定仍設定為 HTTPS。更正協議解決了問題。

調試提示

• 在 Chrome DevTools 中停用快取以避免快取預檢回應。
• 直接向您的服務發送預檢請求以消除潛在的代理幹擾。
• 列印請求緩衝區（例如，使用 httputil.DumpRequest）進行偵錯目的。