跨域策略文件的必要性和應用場景詳解

一、什麼是跨域請求

在現代 web 應用中，跨域請求是很常見的。所謂跨域，就是指通過 Ajax 或者其他方式從當前頁面向不同源（域名、埠、協議）的伺服器發起請求。

跨域請求在安全性上可能存在風險，如黑客利用跨域請求盜取用戶的敏感信息。因此，瀏覽器實際中對跨域請求進行了限制。如 Ajax 不允許發送跨域請求等。

二、跨域策略文件的必要性

為了保證前端頁面的安全性，所有現代瀏覽器都實施了同源策略。這個策略要求，如果一個資源（例如腳本、樣式表、圖片等）要被當前頁面之外的代碼訪問，那麼該資源的伺服器必須允許訪問。

而跨域策略文件（Cross-Origin Resource Sharing, CORS）就是為了解決這個問題而被引入的。跨域策略文件，簡稱 CORS 文件，用於 HTTP 請求在特定情況下完成跨域訪問。

CORS 文件是一個 HTTP 頭信息，主要定義了哪些外域被允許訪問當前域的資源。實際上，CORS 文件是 Web 伺服器通過 HTTP 頭信息告訴瀏覽器。這樣，當瀏覽器發起跨域請求時，會根據這個文件的規則進行跨域訪問。

三、CORS 的應用場景

1、使用第三方 API

很多現代應用都需要調用第三方 API，而這些 API 通常都不在同一域名下，這就需要使用跨域請求。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com/api', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}
xhr.send();

在這種情況下，伺服器需要允許 www.example.com 域名下的 JavaScript 腳本訪問該 API。伺服器可以通過設置 CORS 文件來控制訪問規則。

2、使用 CDN 載入靜態資源

很多網站都使用 CDN 載入靜態資源，如樣式、腳本、字體等。而 CDN 與網站往往不在同一域名下，這就需要使用跨域請求。

在這種情況下，CDN 需要允許當前網站訪問該靜態資源。CDN 伺服器可以通過設置 CORS 文件允許訪問。

四、CORS 文件的設置方式

伺服器可以通過兩種方式設置 CORS 文件：一是通過 HTTP 響應頭信息設置；二是通過文件內容設置。

1、通過 HTTP 響應頭信息設置

伺服器可以在 HTTP 響應頭信息中添加 CORS 相關的欄位，告訴瀏覽器哪些外域名的請求是允許的。

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests
Access-Control-Allow-Credentials: true

2、通過文件內容設置

除了在 HTTP 響應頭信息中添加 CORS 欄位，還可以通過文件內容設置 CORS 文件。

在 Apache 伺服器中：

Header set Access-Control-Allow-Origin "http://www.example.com"
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "X-Custom-Header, Upgrade-Insecure-Requests"
Header set Access-Control-Allow-Credentials "true"

在 Nginx 伺服器中：

add_header 'Access-Control-Allow-Origin' 'http://www.example.com';
add_header 'Access-Control-Allow-Methods' 'POST, GET, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'X-Custom-Header, Upgrade-Insecure-Requests';
add_header 'Access-Control-Allow-Credentials' 'true';

五、總結

跨域問題一直是現代 web 開發中的難題，而跨域策略文件（CORS）就是為了解決這個問題而被引入的。在開發 web 應用時，開發者應該深入了解跨域問題和 CORS 文件，在實際開發中做好跨域訪問的管理與控制。