歡迎來(lái)到藍(lán)隊(duì)云技術(shù)小課堂，每天分享一個(gè)技術(shù)小知識(shí)。

在 Web 開(kāi)發(fā)中，跨域問(wèn)題常常是前端和后端之間的一大障礙。尤其是前后端分離的架構(gòu)中，前端和后端可能位于不同的域名或者端口上，瀏覽器的同源策略就會(huì)阻止跨域請(qǐng)求。

在這種情況下，Nginx 作為反向代理服務(wù)器，可以通過(guò)配置代理頭部信息，輕松解決跨域問(wèn)題。具體方法是通過(guò)配置 CORS（跨域資源共享）來(lái)允許跨域請(qǐng)求。

解決跨域問(wèn)題的步驟

配置 Nginx 添加 CORS 頭部

Nginx 可以使用 add_header 指令來(lái)為響應(yīng)添加 CORS 相關(guān)的 HTTP 頭部，從而允許跨域請(qǐng)求。通常來(lái)說(shuō)，CORS 需要添加以下幾個(gè)頭部：

· Access-Control-Allow-Origin：允許跨域的源，*表示允許所有域名。

· Access-Control-Allow-Methods：允許的 HTTP 方法（比如 GET、POST、PUT、DELETE 等）。

· Access-Control-Allow-Headers：允許的請(qǐng)求頭部，常見(jiàn)的有 Content-Type、Authorization 等。

· Access-Control-Allow-Credentials：是否允許客戶端攜帶 cookie，通常設(shè)置為 true。

· Access-Control-Max-Age：緩存預(yù)檢請(qǐng)求的結(jié)果時(shí)間。

Nginx 配置示例

假設(shè)前端和后端服務(wù)分布在不同的域名上，前端請(qǐng)求后端時(shí)需要配置跨域。你可以通過(guò)在 Nginx 配置文件中添加以下內(nèi)容來(lái)處理跨域問(wèn)題：

打開(kāi) Nginx 配置文件（如 /etc/nginx/nginx.conf 或者其他對(duì)應(yīng)的站點(diǎn)配置文件），在 server 或 location 塊中加入 CORS 配置：

server {

    listen 80;

    server_name your-api-domain.com;

    location / {

        # 允許跨域請(qǐng)求的源，* 表示允許所有域

        add_header Access-Control-Allow-Origin *;

        # 允許的請(qǐng)求方法

        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

        # 允許的請(qǐng)求頭

        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';

        # 允許客戶端攜帶 cookies

        add_header Access-Control-Allow-Credentials true;

        # 預(yù)檢請(qǐng)求的緩存時(shí)間

        add_header Access-Control-Max-Age 3600;

        # 處理 OPTIONS 請(qǐng)求（預(yù)檢請(qǐng)求）

        if ($request_method = 'OPTIONS') {

            add_header Access-Control-Allow-Origin *;

            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

            add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept, Authorization';

            add_header Access-Control-Allow-Credentials true;

            add_header Access-Control-Max-Age 3600;

            return 204;

        }

        # 其他配置（例如，代理轉(zhuǎn)發(fā)等）

        proxy_pass http://www.tjdsmy.cn;

    }

}

解釋：

· *Access-Control-Allow-Origin ： 允許所有域的請(qǐng)求。如果只想允許特定的域名跨域請(qǐng)求，可以把 * 改成該域名（比如 http://www.tjdsmy.cn）。

· Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'：允許的 HTTP 方法。

· Access-Control-Allow-Headers：允許客戶端請(qǐng)求時(shí)發(fā)送的自定義頭部。

· Access-Control-Allow-Credentials true：允許客戶端發(fā)送 cookies。

· Access-Control-Max-Age 3600：預(yù)檢請(qǐng)求緩存一小時(shí)，減少不必要的重復(fù)請(qǐng)求。

· if ($request_method = 'OPTIONS')：針對(duì) OPTIONS 請(qǐng)求進(jìn)行特殊處理，瀏覽器會(huì)先發(fā)送一個(gè)預(yù)檢請(qǐng)求來(lái)檢查服務(wù)器是否支持跨域。

重啟 Nginx

配置完成后，需要重啟 Nginx 使配置生效：

sudo systemctl restart nginx

藍(lán)隊(duì)云官網(wǎng)上擁有完善的技術(shù)支持庫(kù)可供參考，大家可自行查閱，更多技術(shù)問(wèn)題，可以直接咨詢。同時(shí)，藍(lán)隊(duì)云整理了運(yùn)維必備的工具包免費(fèi)分享給大家使用，需要的朋友可以直接咨詢。

更多技術(shù)知識(shí)，藍(lán)隊(duì)云期待與你一起探索。