首頁 > web前端 > js教程 > CORS(跨域資源共享)簡介 什麼是CORS?

CORS(跨域資源共享)簡介 什麼是CORS?

DDD
發布: 2024-11-16 02:10:03
原創
531 人瀏覽過

Introduction to CORS (Cross-Origin Resource Sharing) What is CORS?

CORS 或跨網域資源共享,是一種由 Web 瀏覽器實現的安全功能,允許或限制 Web 應用程式向與提供網頁的網域不同的網域發出請求。簡單來說,CORS 決定了一個網域中的資源是否可以被另一個網域中的網頁存取。

預設情況下,Web 瀏覽器強制執行同源策略,該策略會阻止網頁向與提供該頁面的網域不同的網域發出請求。這樣做是為了防止惡意網站存取其他網站上的敏感資料。然而,有時 Web 應用程式需要從不同的來源(網域、協定或連接埠)請求資源,這就是 CORS 發揮作用的地方。

CORS 的實際應用

當一個網域上的 Web 應用程式需要從另一個網域請求資料時,它會傳送 HTTP 請求,其中包含指示請求來源的特定標頭。然後,託管所請求資源的伺服器必須透過在回應中傳送適當的 CORS 標頭來決定是否允許該請求。

例如,如果您正在建立託管在http://example.com 上的前端應用程序,並且它需要從http://api.example2.com 獲取數據,則CORS 標頭允許位於api.example2 的伺服器. com 指定是否允許來自 example.com 的請求。

常見用例

以下場景通常需要 CORS:

第三方 API 存取:許多現代 Web 應用程式依賴外部 API 來提供身份驗證、支付處理或社交媒體整合等服務。當這些 API 託管在不同的網域上時,CORS 是必要的。

前後端通訊:如果 Web 應用程式的前端和後端託管在不同的網域或子網域上,則使用 CORS 來允許它們之間的通訊。

CDN(內容交付網路):網站通常使用 CDN 來提供靜態資產,例如圖像、樣式表或 JavaScript 檔案。 CORS 允許主站點從託管在不同來源的 CDN 請求這些資源。

CORS 中的關鍵參數和指標

Access-Control-Allow-Origin:此標頭是 CORS 中最重要的標頭,指示允許哪些來源存取該資源。可以設定為:

特定來源(Access-Control-Allow-Origin:https://example.com)
通配符(Access-Control-Allow-Origin:*),允許任何來源存取資源。但是,對於包含憑證的請求不允許這樣做。
Access-Control-Allow-Methods:指定存取資源時允許使用哪些 HTTP 方法(例如 GET、POST、PUT、DELETE)。例如:
存取控制允許方法:GET、POST、PUT

Access-Control-Allow-Headers:列出發出實際請求時可以使用的 HTTP 標頭。例如,如果請求包含像 X-Custom-Header 這樣的自訂標頭,則應在此處指定:
存取控制允許標頭:X-自訂標頭,內容類型

Access-Control-Allow-Credentials:指示請求是否可以包含 cookie、HTTP 驗證或用戶端憑證等憑證。這對於需要身份驗證的 API 非常重要。例如:Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers:指定瀏覽器應向請求客戶端公開哪些標頭。預設情況下,瀏覽器僅公開一組有限的標頭,例如 Cache-Control 和 Content-Type,但 Access-Control-Expose-Headers 可以提供其他標頭。

Access-Control-Max-Age:定義瀏覽器可以快取預檢請求結果(請參閱下文)的時間。它透過減少預檢請求的數量來幫助提高效能。例如:
Access-Control-Max-Age:86400(24小時)

預檢請求:對於某些類型的請求,尤其是那些修改伺服器資料(例如 PUT 或 DELETE)的請求,瀏覽器使用 HTTP OPTIONS 方法發送預檢請求。這會向伺服器檢查實際請求是否可以安全地發送。伺服器對預檢請求的回應決定瀏覽器是否繼續處理實際請求。

什麼時候需要 CORS?

以下情況需要 CORS:

發出跨網域請求:如果您的前端和後端由不同的網域或連接埠提供服務,或者您從應用程式存取外部 API。

存取 CDN 或第三方服務上託管的資源:例如,如果您從 CDN 載入字體、圖像或其他資源,伺服器必須包含 CORS 標頭以允許您的網站存取它們。

安全性問題:雖然啟用 CORS 允許跨網域請求,但應仔細配置它以避免您的應用程式遭受惡意攻擊。只應允許受信任的來源,並且應使用身份驗證令牌等附加安全措施來保護敏感操作。

結論

CORS 是確保不同來源的資源安全、受控共享的重要機制。經過正確配置,它有助於現代 Web 應用程式與第三方服務和 API 交互,同時保護使用者免受安全風險。對於任何使用 API、CDN 或多域應用程式的 Web 開發人員來說,了解如何配置 CORS 標頭並了解何時以及為何需要它們至關重要。

以上是CORS(跨域資源共享)簡介 什麼是CORS?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板