在前后端分離架構(gòu)成為主流的今天，HTTP跨域問(wèn)題幾乎是每個(gè)開(kāi)發(fā)者都會(huì)遇到的“攔路虎”。當(dāng)前端頁(yè)面與后端接口不在同一域名下時(shí)，瀏覽器的“同源策略”會(huì)直接攔截請(qǐng)求，導(dǎo)致接口調(diào)用失敗。而Nginx作為高性能的反向代理服務(wù)器，正是解決這一問(wèn)題的高效工具。本文將從跨域本質(zhì)出發(fā)，詳細(xì)拆解兩種用Nginx解決跨域的方案，幫助開(kāi)發(fā)者根據(jù)實(shí)際場(chǎng)景快速落地。

一、先搞懂：HTTP跨域到底是什么？

要解決跨域，首先得明白它的根源——瀏覽器同源策略。這是瀏覽器為了安全設(shè)置的規(guī)則：只有當(dāng)請(qǐng)求的目標(biāo)地址與當(dāng)前頁(yè)面的“協(xié)議、域名、端口”三者完全一致時(shí)，才允許正常訪問(wèn)；只要有一個(gè)不一致，就會(huì)被判定為“跨域”，瀏覽器會(huì)主動(dòng)攔截后端返回的響應(yīng)（即使后端接口本身正常返回?cái)?shù)據(jù)）。

舉個(gè)常見(jiàn)的跨域場(chǎng)景：

• 前端頁(yè)面部署在 http://web.example.com（協(xié)議HTTP，域名web.example.com，端口80）；
• 后端接口部署在 http://api.example.com:8080（域名不同，端口也不同）；
• 此時(shí)前端調(diào)用 http://api.example.com:8080/user 接口，瀏覽器會(huì)直接拋出“Access to XMLHttpRequest at … from origin … has been blocked by CORS policy”錯(cuò)誤，即跨域攔截。

二、Nginx解決跨域的兩種核心方案

Nginx解決跨域的思路本質(zhì)上分為兩類(lèi)：要么“隱藏跨域”（反向代理），要么“允許跨域”（配置CORS頭）。兩者適用場(chǎng)景不同，需根據(jù)實(shí)際需求選擇。

方案一：反向代理（推薦，前后端分離首選）

1. 原理：讓跨域“消失”

反向代理的核心邏輯是：前端不直接請(qǐng)求后端接口，而是請(qǐng)求與自己同域的Nginx服務(wù)器；再由Nginx將請(qǐng)求轉(zhuǎn)發(fā)到實(shí)際的后端接口服務(wù)器。由于前端與Nginx同源，瀏覽器不會(huì)觸發(fā)跨域攔截；而Nginx作為服務(wù)器之間的通信，不受瀏覽器同源策略限制，從而間接實(shí)現(xiàn)接口調(diào)用。

簡(jiǎn)單來(lái)說(shuō)：前端→Nginx（同域）→后端（跨域由Nginx處理），相當(dāng)于“中間加了一層橋梁”。

2. 場(chǎng)景示例

假設(shè)我們的環(huán)境如下：

• 前端項(xiàng)目：打包后的靜態(tài)文件（Vue/React項(xiàng)目），需部署在 http://web.example.com；
• 后端接口：http://api.example.com:8080（如Java Spring Boot、Node.js服務(wù)）；
• 需求：前端調(diào)用 /api/user、/api/order 等接口時(shí)，無(wú)需修改代碼，且不觸發(fā)跨域。

3. 完整Nginx配置

將前端靜態(tài)文件部署在Nginx，并配置反向代理規(guī)則，具體代碼如下（關(guān)鍵部分已加注釋?zhuān)?/p>

# Nginx配置文件（如 nginx.conf 或 sites-available/web.example.com）
server {
    listen 80;  # 監(jiān)聽(tīng)80端口（HTTP默認(rèn)端口）
    server_name web.example.com;  # 前端頁(yè)面的域名（與前端同源）

    # 1. 部署前端靜態(tài)資源
    root /var/www/web-example;  # 前端打包文件的存放路徑（如dist目錄）
    index index.html;  # 默認(rèn)訪問(wèn)首頁(yè)

    # 2. 反向代理配置：攔截前端的/api請(qǐng)求，轉(zhuǎn)發(fā)到后端
    location /api {
        # 核心：轉(zhuǎn)發(fā)目標(biāo)地址（后端接口的真實(shí)地址）
        proxy_pass http://api.example.com:8080;  # 注意：結(jié)尾不要加/api（location已包含）
        
        # 可選但重要：轉(zhuǎn)發(fā)時(shí)攜帶客戶端信息（避免后端獲取不到真實(shí)IP、Host）
        proxy_set_header Host $host;  # 傳遞當(dāng)前請(qǐng)求的Host頭
        proxy_set_header X-Real-IP $remote_addr;  # 傳遞客戶端真實(shí)IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 傳遞代理鏈IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 傳遞請(qǐng)求協(xié)議（HTTP/HTTPS）
    }

    # 處理前端路由（如Vue Router的history模式，避免刷新404）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. 配置效果

• 前端代碼中，接口請(qǐng)求路徑無(wú)需修改，直接寫(xiě) /api/user（而非完整的 http://api.example.com:8080/api/user）；
• 當(dāng)前端發(fā)送 /api/user 請(qǐng)求時(shí)，會(huì)先到 http://web.example.com/api/user（與前端同域，無(wú)跨域）；
• Nginx攔截 /api 路徑，自動(dòng)轉(zhuǎn)發(fā)到 http://api.example.com:8080/api/user，后端處理后將響應(yīng)返回給Nginx，再由Nginx轉(zhuǎn)發(fā)給前端；
• 整個(gè)過(guò)程瀏覽器無(wú)感知，完全規(guī)避跨域問(wèn)題。

方案二：配置CORS響應(yīng)頭（適合直接跨域場(chǎng)景）

如果無(wú)法使用反向代理（比如前端需直接訪問(wèn)第三方接口、或后端域名固定無(wú)法通過(guò)Nginx轉(zhuǎn)發(fā)），則可以通過(guò)Nginx向后端響應(yīng)中添加CORS（跨域資源共享）頭，明確告知瀏覽器“允許該前端域名跨域訪問(wèn)”，從而放行響應(yīng)。

1. 核心CORS頭說(shuō)明

瀏覽器判斷是否允許跨域，關(guān)鍵看后端響應(yīng)中是否包含以下CORS頭，每個(gè)頭的作用如下：

2. 場(chǎng)景示例

假設(shè)需求如下：

• 前端域名：http://web.example.com；
• 后端接口域名：http://api.example.com（需直接訪問(wèn)，無(wú)法用反向代理）；
• 前端需通過(guò) POST 方法調(diào)用 /api/login，并攜帶 Authorization 頭傳遞Token。

3. 完整Nginx配置

此配置需在后端接口的Nginx服務(wù)器中添加（即 api.example.com 對(duì)應(yīng)的Nginx）：

server {
    listen 80;
    server_name api.example.com;  # 后端接口的域名

    # 對(duì)所有接口請(qǐng)求配置CORS頭
    location / {
        # 1. 核心CORS頭配置
        add_header Access-Control-Allow-Origin http://web.example.com;  # 僅允許指定前端域名
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;  # 允許的方法
        add_header Access-Control-Allow-Headers Content-Type,Authorization;  # 允許的請(qǐng)求頭
        add_header Access-Control-Allow-Credentials true;  # 允許攜帶Cookie

        # 2. 處理預(yù)檢請(qǐng)求（OPTIONS方法）
        # 說(shuō)明：復(fù)雜請(qǐng)求（如POST帶自定義頭、PUT/DELETE方法）會(huì)先發(fā)送OPTIONS請(qǐng)求檢查跨域權(quán)限
        if ($request_method = 'OPTIONS') {
            return 204;  # 預(yù)檢請(qǐng)求無(wú)需返回?cái)?shù)據(jù)，204表示“成功且無(wú)內(nèi)容”
        }

        # 3. 轉(zhuǎn)發(fā)到實(shí)際的后端服務(wù)（如本地的8080端口Java服務(wù)）
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

4. 關(guān)鍵注意事項(xiàng)

• 禁止濫用 *：Access-Control-Allow-Origin 設(shè)為 * 時(shí)，Access-Control-Allow-Credentials 不能設(shè)為 true（瀏覽器強(qiáng)制限制，否則會(huì)報(bào)錯(cuò)），生產(chǎn)環(huán)境建議指定具體域名，提升安全性；
• 必須處理OPTIONS請(qǐng)求：若前端發(fā)送的是“復(fù)雜請(qǐng)求”（如帶自定義頭、非GET/POST方法），瀏覽器會(huì)先發(fā)送OPTIONS請(qǐng)求，若Nginx不處理，會(huì)導(dǎo)致跨域失敗，直接返回204即可；
• 避免重復(fù)添加CORS頭：若后端服務(wù)（如Java、Node.js）已配置CORS，Nginx無(wú)需重復(fù)添加，否則可能因頭重復(fù)導(dǎo)致瀏覽器報(bào)錯(cuò)。

三、兩種方案對(duì)比：該選哪一個(gè)？

很多開(kāi)發(fā)者糾結(jié)于方案選擇，其實(shí)核心看“是否能通過(guò)Nginx轉(zhuǎn)發(fā)后端請(qǐng)求”，具體對(duì)比如下：

總結(jié)建議：

• 若你是前后端分離項(xiàng)目，且前端可部署在Nginx上，優(yōu)先選反向代理，安全性和靈活性更高；
• 若你需要直接訪問(wèn)第三方接口（無(wú)法控制對(duì)方Nginx），或后端域名固定無(wú)法轉(zhuǎn)發(fā)，再選CORS頭配置。

四、生產(chǎn)環(huán)境配置注意事項(xiàng)

1. 避免明文傳輸：無(wú)論是哪種方案，生產(chǎn)環(huán)境都建議啟用HTTPS（通過(guò)Nginx配置SSL證書(shū)），防止請(qǐng)求被劫持；
2. 限制允許的域名：CORS方案中，Access-Control-Allow-Origin 務(wù)必指定具體域名，不要用 *；反向代理方案中，可通過(guò) allow/deny 限制前端IP，提升安全性；
3. 測(cè)試預(yù)檢請(qǐng)求：配置完成后，用Postman或?yàn)g覽器控制臺(tái)查看是否有OPTIONS請(qǐng)求，確保返回204；
4. 日志排查問(wèn)題：若跨域仍失敗，可查看Nginx日志（如 /var/log/nginx/access.log），確認(rèn)請(qǐng)求是否被正確轉(zhuǎn)發(fā)、響應(yīng)頭是否添加成功。

結(jié)語(yǔ)

Nginx解決跨域的核心邏輯并不復(fù)雜：要么“繞開(kāi)”同源策略（反向代理），要么“告知”瀏覽器允許跨域（CORS頭）。掌握這兩種方案后，無(wú)論是前后端分離項(xiàng)目，還是第三方接口調(diào)用，都能快速解決跨域問(wèn)題。實(shí)際開(kāi)發(fā)中，建議結(jié)合自身架構(gòu)選擇方案，并注重生產(chǎn)環(huán)境的安全性配置，避免因跨域配置不當(dāng)引入安全風(fēng)險(xiǎn)。

到此這篇關(guān)于Nginx解決HTTP跨域兩種實(shí)用方案的文章就介紹到這了,更多相關(guān)Nginx HTTP跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家

最新評(píng)論