為什麼我的 React 應用程式在存取子網域 API 時出現 CORS 錯誤：\「無法從主網域存取子網域：否\'Access-Control-Allow-Origin\'\」？

了解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）用於偵錯目的。

以上是為什麼我的 React 應用程式在存取子網域 API 時出現 CORS 錯誤：\「無法從主網域存取子網域：否\'Access-Control-Allow-Origin\'\」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！