為網站設置 CORS（跨域資源共享）

什麼是 CORS？

跨域資源共享（CORS）是一種基於 HTTP 頭的機制，用於放寬瀏覽器對跨域請求的限制。簡單來說，當一個網頁（例如，位於 example.com 的網頁）想要從不同的域（例如，api.example.net）請求資源時，瀏覽器會默認阻止這種請求，這就是瀏覽器的同源策略。CORS 允許伺服器在響應中添加特定的頭部，告訴瀏覽器允許哪些來源的請求訪問資源，從而安全地實現跨域訪問。

為什麼要使用 CORS？

當您的前端應用（例如，一個在 app.example.com 上運行的 SPA）需要從後端 API（例如，在 api.example.com 上運行）獲取數據時，您很可能需要使用 CORS。

CORS 參數詳解

以下是 CORS 中常用的一些參數及其作用：

1. Access-Control-Allow-Origin:

   • 作用： 指定允許訪問資源的來源。
   • 取值：
     • *：允許來自任何域的請求（不推薦用於生產環境，因為不安全）。
     • https://example.com：只允許來自 https://example.com 的請求。
     • https://example.com https://www.example.net：只允許來自 https://example.com 和 https://www.example.net 的請求。
   • 重要提示： 當請求帶有 Authorization 首部的時候，Access-Control-Allow-Origin 不能設置為 *，必須設置為具體的域，否則跨域請求將會失敗。

2. Access-Control-Allow-Methods:

   • 作用： 指定允許的 HTTP 方法（如 GET、POST、PUT、DELETE）。
   • 取值： 例如：GET, POST, PUT, DELETE, OPTIONS
   • 重要提示： 如果您的請求包含了自定義的請求頭，或者使用了 PUT 或者 DELETE 方法，您必須在這裡聲明 OPTIONS 方法，否則，瀏覽器會首先發送一個 OPTIONS 預檢請求，如果預檢請求的響應中沒有聲明允許的 OPTIONS 方法，您的請求會失敗。

3. Access-Control-Allow-Headers:

   • 作用： 指定允許客戶端在請求中使用的自定義 HTTP 頭。
   • 取值： 例如： Content-Type, Authorization
   • 重要提示： 如果您的請求中包含了自定義的請求頭，您必須在這裡聲明允許使用，否則瀏覽器會阻止您的請求。

4. Access-Control-Allow-Credentials:

   • 作用： 是否允許跨域請求攜帶 Cookie 或 HTTP 認證信息。
   • 取值： true 或 false。
   • 重要提示： 當設置為 true 時，Access-Control-Allow-Origin 的值不能是通配符 *。

在 ServBay 中啟用並配置 CORS

ServBay 提供了便捷的界面來配置網站的 CORS 設置，具體步驟如下：

1. 選擇網站: 在 ServBay 主界面左側的導航欄中，點擊 “網站” 選項。 從網站列表中選擇您要配置 CORS 的網站。
2. 進入 CORS 配置: 在網站配置界面中，找到 “CORS” 部分。ServBay 默認會關閉 CORS，您需要手動開啟 CORS，將滑塊開關由“關閉”切換至“開啟”狀態。
3. 配置 Access-Control-Allow-Origin: 在 Access-Control-Allow-Origin 輸入框中，輸入允許訪問的域名，多個域名可以使用空格分隔。例如： https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com。
4. 配置 Access-Control-Allow-Methods: 在 Access-Control-Allow-Methods 輸入框中，輸入您希望允許的 HTTP 請求方法。例如：GET, POST, PUT, DELETE, OPTIONS。
5. 配置 Access-Control-Allow-Headers: 在 Access-Control-Allow-Headers 輸入框中，輸入您希望允許的請求頭。例如：Content-Type, Authorization。
6. 啟用 Allow-Credentials (可選): 如果您需要允許跨域請求攜帶 Cookie 或認證信息，請啟用 Allow-Credentials 滑塊開關。請務必注意，如果啟用了此選項，Access-Control-Allow-Origin 的值不能設置為通配符 *。
7. 保存設置: 完成配置後，點擊右下角的 "保存" 按鈕來應用您的更改。

示例

根據上面的截圖，在 “ServBay Testing” 網站中配置的 CORS 如下：

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: 啟用。

這意味著來自以上域名的請求可以訪問 servbay.new 網站的資源，並且可以使用 GET, POST, PUT, DELETE, OPTIONS 方法發送請求，同時可以攜帶 Content-Type 和 Authorization 請求頭和 Cookie 信息。

注意事項

• 安全性: 在生產環境中，請避免使用通配符 * 作為 Access-Control-Allow-Origin 的值。
• 緩存: 瀏覽器可能會緩存 CORS 響應，因此在更改 CORS 設置後，您可能需要清除瀏覽器緩存。
• 代碼配置: 有些情況下，除了在 Web 伺服器配置 CORS 之外，還需要在代碼中（Laravel）配置 CORS。
• 複雜場景: 對於更複雜的跨域場景，您可能需要結合 CORS 和其他技術，例如 JSONP 或代理伺服器。

通過以上步驟，您可以在 ServBay 中輕鬆地為您的網站啟用和配置 CORS，確保您的跨域請求能夠順利進行。

希望這份文檔能幫助您更好地理解和使用 ServBay 的 CORS 功能。如有任何疑問，請隨時提出。