跨域資源共享（CORS）完全指南

在當前的Web開發中，跨域資源共享（CORS）是一個非常熱門的話題。由於瀏覽器的同源策略的限制，跨域資源訪問在很多情況下都會受到限制。為了解決這個問題，CORS應運而生，它允許伺服器與特定的域名進行跨域通信。本文將介紹CORS的一些基礎知識，如何配置伺服器允許跨域訪問，以及CORS的一些高級特性。

一、CORS是做什麼的

CORS（Cross-Origin Resource Sharing）是一種讓Web伺服器允許其他站點訪問它所提供的特定資源的機制，即伺服器端允許通過瀏覽器在其他域上訪問的機制。在Web開發中，CORS經常用來解決跨域問題（Cross-Origin問題：指的是JavaScript在一個域名下運行，而這個腳本試圖去訪問另一個域名下的資源時所遇到的限制）。

二、CORS的機制

CORS的機制涉及到HTTP頭信息的設置。當瀏覽器發現跨域請求時，會自動發送一個預檢請求（Preflight）。這個預檢請求包含兩個常用的HTTP頭：Access-Control-Request-Method和Access-Control-Request-Headers。

伺服器在收到預檢請求後，會根據可以接受的請求方法和頭信息進行響應，同時還會添加一些HTTP頭，例如Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers、Access-Control-Allow-Credentials等。這樣，瀏覽器就可以在收到伺服器的確認響應後，發送實際的數據請求。如果伺服器允許跨域請求，它會發送一個Access-Control-Allow-Origin響應頭，指定允許的來源域名，然後瀏覽器就可以拿到伺服器的響應信息。

三、CORS的使用示例

以下是一個簡單的例子，展示了如何使用CORS機制從另一個域名請求JSON數據。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.withCredentials = true;
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();

在該代碼示例中，我們使用XMLHttpRequest對象向不同的伺服器發送一個GET請求，並通過設置xhr.withCredentials為true啟用了cookie的發送。這個請求可能會被瀏覽器視為跨域請求，所以伺服器需要在響應中添加Access-Control-Allow-Origin頭部。

四、CORS之Access-Control-Allow-Origin

Access-Control-Allow-Origin是CORS中最常見的響應頭，它表示伺服器允許的跨域請求的來源域，可以使用通配符 * 表示允許任意域名訪問。例如：

Access-Control-Allow-Origin: *

如果伺服器希望允許某些域名訪問，也可以指定具體的域名，例如：

Access-Control-Allow-Origin: http://example.com

五、CORS之Access-Control-Allow-Credentials

通常cookie是不允許發送到跨域伺服器的，但是如果設置了Access-Control-Allow-Credentials為true，就可以讓瀏覽器發送cookie來認證請求。例如：

Access-Control-Allow-Credentials: true

六、CORS之Access-Control-Expose-Headers

默認情況下，瀏覽器只會暴露6個HTTP頭信息，包括Cache-Control、Content-Language、Content-Type、Expires、Last-Modified和Pragma。如果需要伺服器暴露其他HTTP頭，可以設置Access-Control-Expose-Headers頭。例如：

Access-Control-Expose-Headers: X-Header1, X-Header2

七、CORS之Access-Control-Request-Headers

Access-Control-Request-Headers表示預檢請求中所帶的header信息。例如，如果客戶端需要給伺服器發送自定義的header信息，可以通過設置Access-Control-Request-Headers頭來進行描述。例如：

Access-Control-Request-Headers: content-type

八、CORS之Access-Control-Request-Method

Access-Control-Request-Method表示預檢請求中所帶的請求方法，例如GET、POST、DELETE等。它與Access-Control-Request-Headers一起被瀏覽器用來判斷跨域請求是否安全。例如：

Access-Control-Request-Method: POST

九、CORS如何配置伺服器

對於Apache HTTP Server和Nginx等WEB伺服器，可以通過修改配置文件來實現CORS。以下是示例代碼：

Apache HTTP Server

Header set Access-Control-Allow-Origin "*"

Nginx

add_header Access-Control-Allow-Origin *;

十、總結

本文主要介紹了CORS的基礎知識，如何在伺服器上配置允許跨域訪問以及CORS的一些高級特性。作為Web開發者，我們需要深入了解CORS並掌握其基本原理和應用，以便更好地應對跨域訪問問題。