深入了解CORS

本文，由Panayiotis“ PVGR” Velisarakos進行了同行評審（感謝所有SitePoint Pose Peer Reviewer！），探索了交叉孔源資源共享（CORS），HTML5 API啟用網站可以訪問先前受限制的外部資源。 CORS放寬了同一原始政策，允許向不同域的請求。 例如，在CORS之前，跨域AJAX請求是不可能的。本文演示了CORS如何增強Web體驗。

鑰匙要點：

大多數現代瀏覽器都支持CORS。
標題確定哪些起源可以訪問服務器響應。
2. Access-Control-Allow-Origin標題控制cookie訪問。
3. >簡單的請求（獲取，頭，發布）不要觸發前飛行；更複雜的請求會。 Access-Control-Allow-Credentials
>
4. 屬性（帶有
或
5. 值）控制憑證處理 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" https: alt="”" cors><code>crossorigin> anonymoususe-credentials preflights： <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" alt="An In-depth Look at CORS "> <p><strong>Preflights:</strong></p> <p>For complex requests (methods beyond GET/HEAD/POST, or custom headers), preflights (an initial OPTIONS request) verify server acceptance. The server responds with <code>Access-Control-Allow-Origin 對於復雜的請求（超出get/head/post或自定義標頭）的複雜請求（初始選項請求）驗證服務器接受。 服務器響應Access-Control-Allow-Credentials，Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Max-Age和Access-Control-Request-Method>標題。客戶端在前飛行中發送Access-Control-Request-Headers>>>>

   

   CORS和CANVAS IMAGES：>

   要在畫布中使用外部圖像，服務器必須啟用CORS（例如，通過在服務器配置中設置

   ）。客戶端代碼需要Access-Control-Allow-Origin。 沒有CORS，就會發生安全例外。 img.setAttribute('crossOrigin', 'anonymous');>

   

   >屬性：crossorigin>

   >使用HTML標籤獲取外部資源（圖像，樣式表，腳本）時，屬性會觸髮帶有

   header的cors請求。 crossorigin省略憑據； Origin包括它們（需要服務器端anonymous）。 use-credentials> Access-Control-Allow-Credentials: true

   結論：

   通過促進交叉原始資源訪問，CORS可顯著增強Web開發。 了解其安全含義並正確實施至關重要。

   >

   常見問題（常見問題解答）：>

   >常見問題解答部分提供了有關CORS的常見問題的詳細答案，涵蓋了標頭的目的，cookie處理的目的，簡單與預覆蓋的請求，服務器端配置，安全風險，HTTP請求兼容性，特定標頭，瀏覽器行為的作用，測試以及CORS和JSONP之間的差異。 （原始常見問題解答部分保留了整體。）

以上是深入了解CORS的詳細內容。更多資訊請關注PHP中文網其他相關文章！