1. 理解 CORS 和同源策略

1.1 同源策略

同源策略是一種瀏覽器安全機(jī)制，用于阻止不同源（不同域名、協(xié)議或端口）的 Web 應(yīng)用相互訪問(wèn)數(shù)據(jù)。它確保了 Web 應(yīng)用的隔離性，防止惡意網(wǎng)站訪問(wèn)用戶數(shù)據(jù)或執(zhí)行不安全的操作。

同源策略下，同一個(gè)域（相同的協(xié)議、域名和端口）內(nèi)的資源可以自由訪問(wèn)。但如果協(xié)議、域名或端口有任何不同，瀏覽器會(huì)阻止這種訪問(wèn)。

1.2 跨域資源共享 (CORS)

CORS（Cross-Origin Resource Sharing，跨域資源共享）是 W3C 標(biāo)準(zhǔn)，用于解決跨域訪問(wèn)問(wèn)題。通過(guò) CORS，服務(wù)器可以聲明哪些來(lái)源的請(qǐng)求是被允許的，以及允許客戶端通過(guò)哪些 HTTP 方法和頭部進(jìn)行訪問(wèn)。

CORS 的實(shí)現(xiàn)依賴于服務(wù)器返回的特定 HTTP 頭信息，這些頭信息指導(dǎo)瀏覽器允許或拒絕特定的跨域請(qǐng)求。

2. Nginx 解決跨域問(wèn)題的基本原理

Nginx 可以通過(guò)配置 HTTP 響應(yīng)頭來(lái)支持 CORS。這些頭信息包括 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 和 Access-Control-Allow-Credentials 等。通過(guò)在 Nginx 中配置這些頭信息，可以允許特定的域、方法和頭部進(jìn)行跨域訪問(wèn)。

3. 配置 Nginx 解決跨域問(wèn)題

下面是如何在 Nginx 中配置 CORS 的具體步驟。

3.1 基礎(chǔ)配置

假設(shè)我們有一個(gè) API 服務(wù)器，域名為 api.example.com，需要允許來(lái)自 www.example.com 的前端應(yīng)用進(jìn)行跨域請(qǐng)求。

首先，找到或創(chuàng)建 Nginx 的配置文件（通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目錄中），然后在需要跨域的服務(wù)器塊（server 塊）或位置塊（location 塊）中添加 CORS 相關(guān)的頭部配置。

server {
    listen 80;
    server_name api.example.com;

    location / {
        # 設(shè)置允許跨域的域名，可以使用通配符 '*' 允許所有域訪問(wèn)
        add_header 'Access-Control-Allow-Origin' 'http://www.example.com';

        # 設(shè)置允許的 HTTP 方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';

        # 設(shè)置允許的請(qǐng)求頭
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';

        # 如果需要支持 cookie，可以設(shè)置以下 header
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 如果是預(yù)檢請(qǐng)求（OPTIONS 請(qǐng)求），則直接返回 204 狀態(tài)碼
        if ($request_method = 'OPTIONS') {
            return 204;
        }

        # 其他正常請(qǐng)求的處理邏輯
        proxy_pass http://backend_server;
    }
}

3.2 關(guān)鍵配置項(xiàng)詳解

Access-Control-Allow-Origin：指定允許跨域請(qǐng)求的來(lái)源?？梢栽O(shè)置為具體的域名（如 http://www.example.com），或使用通配符 * 允許所有來(lái)源。使用通配符時(shí)，不允許設(shè)置 Access-Control-Allow-Credentials 為 true。

Access-Control-Allow-Methods：指定允許的 HTTP 請(qǐng)求方法，如 GET、POST、OPTIONS、PUT、DELETE 等。可以根據(jù)實(shí)際需要設(shè)置。

Access-Control-Allow-Headers：指定允許客戶端發(fā)送的自定義 HTTP 頭部，如 Authorization、Content-Type 等。此配置項(xiàng)通常用于支持復(fù)雜請(qǐng)求（帶自定義頭部的請(qǐng)求）。

Access-Control-Allow-Credentials：如果客戶端請(qǐng)求包括憑據(jù)（如 Cookies），則該選項(xiàng)必須設(shè)置為 true。注意，此時(shí) Access-Control-Allow-Origin 不能為 *，必須為具體的域名。

預(yù)檢請(qǐng)求的處理：瀏覽器在發(fā)送某些復(fù)雜請(qǐng)求之前，會(huì)發(fā)送一個(gè) OPTIONS 請(qǐng)求進(jìn)行預(yù)檢，詢問(wèn)服務(wù)器是否允許該請(qǐng)求。Nginx 可以在檢測(cè)到 OPTIONS 請(qǐng)求時(shí)，直接返回狀態(tài)碼 204，表示請(qǐng)求被允許，但不包含任何內(nèi)容。

3.3 配置通配符

在某些場(chǎng)景中，如果需要允許所有域訪問(wèn)（即不限制跨域請(qǐng)求的來(lái)源），可以將 Access-Control-Allow-Origin 設(shè)置為 *：

add_header 'Access-Control-Allow-Origin' '*';

需要注意的是，使用通配符時(shí)，不能同時(shí)啟用 Access-Control-Allow-Credentials，否則瀏覽器會(huì)拒絕請(qǐng)求。

3.4 動(dòng)態(tài)設(shè)置 CORS 頭

如果需要根據(jù)請(qǐng)求動(dòng)態(tài)設(shè)置 Access-Control-Allow-Origin，可以使用 $http_origin 變量來(lái)匹配請(qǐng)求來(lái)源。例如：

location / {
    if ($http_origin ~* 'https?://(www.)?(example1.com|example2.com)') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept';
    }

    if ($request_method = 'OPTIONS') {
        return 204;
    }

    proxy_pass http://backend_server;
}

這種配置可以在滿足特定條件時(shí)，動(dòng)態(tài)地允許多個(gè)域名進(jìn)行跨域訪問(wèn)。

4. 預(yù)檢請(qǐng)求與 OPTIONS 方法的處理

預(yù)檢請(qǐng)求是 CORS 規(guī)范中定義的一種機(jī)制，用于在實(shí)際請(qǐng)求之前探測(cè)服務(wù)器是否允許某個(gè)跨域請(qǐng)求。瀏覽器在發(fā)送某些復(fù)雜請(qǐng)求時(shí)，會(huì)首先發(fā)送一個(gè) OPTIONS 請(qǐng)求，詢問(wèn)服務(wù)器是否允許該請(qǐng)求。

Nginx 可以通過(guò)簡(jiǎn)單的配置處理這種預(yù)檢請(qǐng)求：

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';
    return 204;
}

這段配置會(huì)在收到 OPTIONS 請(qǐng)求時(shí)，返回一個(gè) 204 No Content 響應(yīng)，并帶有必要的 CORS 頭部信息，表明服務(wù)器允許接下來(lái)的實(shí)際請(qǐng)求。

5. 實(shí)踐中的注意事項(xiàng)

5.1 安全性考慮

雖然 CORS 是解決跨域問(wèn)題的有效手段，但不應(yīng)隨意允許所有域訪問(wèn)（即設(shè)置 Access-Control-Allow-Origin 為 *）。這種配置可能會(huì)引發(fā)安全隱患，因?yàn)槿魏蝸?lái)源的腳本都可以訪問(wèn)資源。因此，在配置時(shí)應(yīng)明確指定允許的來(lái)源，并嚴(yán)格控制跨域訪問(wèn)的權(quán)限。

5.2 性能優(yōu)化

CORS 請(qǐng)求處理會(huì)增加服務(wù)器的負(fù)載，特別是在預(yù)檢請(qǐng)求頻繁的情況下。為了減少性能開(kāi)銷，可以通過(guò)以下方法進(jìn)行優(yōu)化：

啟用緩存：通過(guò)設(shè)置 Access-Control-Max-Age 頭，可以讓瀏覽器緩存預(yù)檢請(qǐng)求的結(jié)果，減少實(shí)際請(qǐng)求前的預(yù)檢次數(shù)。

合并請(qǐng)求：在可能的情況下，減少跨域請(qǐng)求的數(shù)量，避免不必要的預(yù)檢請(qǐng)求。

5.3 配置管理

在生產(chǎn)環(huán)境中管理 Nginx 配置時(shí)，建議將 CORS 相關(guān)的配置與其他配置分開(kāi)管理。例如，可以在 Nginx 的配置文件中創(chuàng)建一個(gè)單獨(dú)的文件來(lái)管理 CORS 配置，并在需要的 server 或 location 塊中包含此文件：

include /etc/nginx/cors.conf;

這種方式可以使配置更清晰、更易于管理。

6. 示例場(chǎng)景與配置示例

6.1 單頁(yè)應(yīng)用與 API 后端

假設(shè)有一個(gè)單頁(yè)應(yīng)用（SPA）部署在 www.example.com，它通過(guò) Ajax 請(qǐng)求從 api.example.com 獲取數(shù)據(jù)。Nginx 的配置可以如下：

server {
    listen 80;
    server_name api.example.com;

    location /api/ {
        add_header 'Access-Control-Allow-Origin' 'http://www.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

        if ($request_method = 'OPTIONS') {


            return 204;
        }

        proxy_pass http://backend_api_server;
    }
}

6.2 支持多個(gè)域名的跨域訪問(wèn)

如果需要支持來(lái)自多個(gè)域名的跨域請(qǐng)求，例如 www.example1.com 和 www.example2.com，可以使用如下配置：

location /api/ {
    if ($http_origin ~* 'https?://(www.example1.com|www.example2.com)') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
    }

    if ($request_method = 'OPTIONS') {
        return 204;
    }

    proxy_pass http://backend_api_server;
}

7. 總結(jié)

通過(guò) Nginx 配置 CORS 頭部信息，可以有效解決前端跨域問(wèn)題，允許前端應(yīng)用從不同的域名、協(xié)議或端口請(qǐng)求資源。在配置過(guò)程中，需要仔細(xì)考慮安全性、性能優(yōu)化和管理的易用性，以確保跨域請(qǐng)求的安全和高效處理。Nginx 強(qiáng)大的配置能力使其能夠靈活應(yīng)對(duì)各種跨域需求，為前端應(yīng)用提供強(qiáng)有力的支持。

以上就是使用Nginx解決前端跨域問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Nginx解決前端跨域的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論