Zi 字媒體

Getting Started with HTTP CORS 在網站開發上，跨來源資源共用是一種很常使用的技巧，但由於跨來源以後就會衍伸出許多權限及安全問題，因此 HTTP 有了 CORS（Cross-Origin Resource Sharing） 相關的規範。 CORS 的運作方式是藉由加入新的 HTTP 標頭讓伺服器能夠描述來源資訊以提供瀏覽器讀取。同時，也會針對會造成副作用的 HTTP 請求方法，規範要求瀏覽器以 OPTIONS 向對方送出 預檢請求（Preflighted），以確認後續請求是否可安全送出。 What requests use CORS？ 以下為常見會使用到 CORS 的 request： 使用 XMLHttpRequest 或 Fetch API 進行跨站請求 Web fonts WebGL textures CSS 樣式表 Simple Requests（簡單請求） 在跨站請求中，HTTP 有規範幾種標準的 request 是不會觸發 CORS 預檢請求的，我們稱之為 Simple Requests。 允許的 HTTP method： GET HEAD POST 允許的 Header： Accept Accept-Language Content-Language Content-Type Last-Event-ID DPR Save-Data Viewport-Width Width 其中 Content-Type 只允許 application/x-www-form-urlencoded、multipart/form-data、text/plain 三種值。 Preflighted（預檢請求） 如果未符合 Simple Requests 的標準，瀏覽器便會以 OPTIONS 發出預檢請求（Preflighted）。 會發出預檢請求的 HTTP method： PUT DELETE CONNECT OPTIONS TRACE PATCH Notice： 只要有自訂的 Header 便不符合 Simple Requests 的規範，瀏覽器就會送出 預檢請求（Preflighted）。 HTTP response headers 另一方面，伺服器端也要設定相對應的標頭，以規範請求的來源。 Header Description Access-Control-Allow-Origin 設定可以存取資源的 URI Access-Control-Max-Age 預檢請求的結果可以被 cache 多長的時間 Access-Control-Allow-Methods 存取資源所允許的 HTTP method Access-Control-Allow-Headers 指定可以使用哪些 HTTP headers Access-Control-Expose-Headers 允許瀏覽器存取回應標頭的白名單 範例 Access-Control-Allow-Origin: https://blog.johnsonlu.org Access-Control-Allow-Methods: GET,POST,PUT Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization, X-Verify-Key Categories: HTTP Tags: HTTP 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop HTTP Language Go Java JavaScript jQuery jQueryChart Node.js Vue Vue-CLI PHP Laravel Lumen ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: