快捷導(dǎo)航

利用Nginx實現(xiàn)資源代理和接口代理的實現(xiàn)方法

更新時間：2025年04月22日 08:49:09 作者：代碼怪獸大作戰(zhàn)

在 Web 開發(fā)與部署中,我們常常需要借助 Nginx 實現(xiàn)接口代理和靜態(tài)資源代理,以解決跨域、統(tǒng)一入口、權(quán)限控制或性能優(yōu)化等問題,本指南將全面介紹 Nginx 資源代理與接口代理的實現(xiàn)方法,需要的朋友可以參考下

前言

在 Web 開發(fā)與部署中，我們常常需要借助 Nginx 實現(xiàn)接口代理和靜態(tài)資源代理，以解決跨域、統(tǒng)一入口、權(quán)限控制或性能優(yōu)化等問題。本指南將全面介紹 Nginx 資源代理與接口代理的實現(xiàn)方法，并深入解析 proxy_set_header Host 配置的差異與最佳實踐。

在現(xiàn)代前后端分離的架構(gòu)中，前端頁面往往需要訪問多個不同域名的后端服務(wù)，或引用外部的靜態(tài)資源。若直接請求，會產(chǎn)生跨域問題，或不便于統(tǒng)一管理。這時，使用 Nginx 實現(xiàn)代理是一種優(yōu)雅的解決方案。

一、資源代理與接口代理的區(qū)別

項目	資源代理（靜態(tài)文件）	接口代理（API 接口）
目標(biāo)	靜態(tài)文件（如 JS、CSS、圖片等）	后端接口（如 JSON API）
常見場景	加載第三方資源、鏡像遠(yuǎn)程 CDN、本地統(tǒng)一管理第三方腳本等	跨域接口訪問、統(tǒng)一接口路徑、API 聚合等
請求方式	GET	GET、POST、PUT、DELETE 等多種方式
常見配置重點	`proxy_pass`、緩存策略、MIME 類型	`proxy_pass`、請求頭設(shè)置（如 Host、Authorization）等

類型	示例 URL	功能說明
資源代理	`/proxy/res/plugin/editor/editor.js`	將前端請求的靜態(tài)資源轉(zhuǎn)發(fā)給外部服務(wù)器
接口代理	`/api/user/info`	將請求的接口轉(zhuǎn)發(fā)到指定后端服務(wù)

二、應(yīng)用場景舉例

資源代理場景：

前端項目需要引入第三方編輯器插件，例如來自 static.example.com 的 JS/CSS 文件。但出于同源策略或備案原因，希望通過 Nginx 中轉(zhuǎn)。
接口代理場景：

前端調(diào)用 /api/user/info 實際請求應(yīng)轉(zhuǎn)發(fā)到 api-backend.example.com/user/info，避免跨域問題或隱藏后端真實地址。

三、資源代理配置

示例目標(biāo)

將請求：

https://test.example.com/proxy/res/plugin/editor/editor.js

代理到：

https://static.example.com/res/plugin/editor/editor.js

Nginx 配置示例

server {
    listen 443 ssl;
    server_name test.example.com;

    ssl_certificate     /etc/nginx/ssl/test.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/test.example.com.key;

    location /proxy/res/plugin/editor/ {
        proxy_pass https://static.example.com/res/plugin/editor/;
        proxy_set_header Host static.example.com;  # 保持與目標(biāo)一致，避免部分資源校驗失敗
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

注意：proxy_pass 末尾保留 /，確保路徑拼接正確。

四、接口代理配置

示例目標(biāo)

將請求：

https://test.example.com/api/user/info

代理到：

http://api-backend.example.com/user/info

Nginx 配置示例

	location /api/ {
    proxy_pass http://api-backend.example.com/;
    proxy_set_header Host $host;  # 保留前端原始 Host 頭，用于權(quán)限校驗或日志追蹤
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

注意：若 proxy_pass 后帶 /，則會將匹配到的路徑直接截去 /api/，從而 /api/user/info → /user/info。

五、關(guān)于 proxy_set_header Host 的設(shè)置差異說明

設(shè)置形式	說明與適用場景
`proxy_set_header Host $host;`	將客戶端請求中的 Host 原樣轉(zhuǎn)發(fā)，適用于接口代理、保留訪問域名。
`proxy_set_header Host example.com;`	強制設(shè)置 Host 為目標(biāo)服務(wù)器，適用于資源代理、目標(biāo)服務(wù)器嚴(yán)格校驗域名時。

六、常見問題排查

資源無法加載，返回 403/404？
- 是否 proxy_pass 寫法錯誤？結(jié)尾是否缺少 /？
- 目標(biāo)資源服務(wù)器是否校驗 Host？試試 proxy_set_header Host xxx。
- URL 拼接是否正確？可通過 curl -v 本地排查。
跨域問題（CORS）？
- Nginx 不是萬能解決方案，需要目標(biāo)服務(wù)支持 CORS；
- 若目標(biāo)后端不可控，可由 Nginx 添加響應(yīng)頭：

location /api/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    add_header Access-Control-Allow-Headers *;
    proxy_pass http://api-backend.example.com/;
}

注意：生產(chǎn)環(huán)境中建議使用白名單，避免任意源訪問。

七、安全建議與優(yōu)化

限定訪問來源

allow 10.0.0.0/8;
deny all;

開啟緩存提升性能（資源代理）

proxy_cache_path /tmp/nginx_cache levels=1:2 keys_zone=res_cache:10m inactive=1h max_size=1g;

location /proxy/res/ {
    proxy_cache res_cache;
    proxy_pass https://static.example.com/res/;
}

統(tǒng)一接口前綴管理 使用 /api/ 路由前綴劃分接口，避免前后端路徑?jīng)_突。

八、總結(jié)

場景	proxy_pass 寫法	Host 設(shè)置建議
靜態(tài)資源代理	`proxy_pass https://xxx/資源路徑/`	`proxy_set_header Host 具體域名`
接口代理	`proxy_pass http://xxx/`	`proxy_set_header Host $host`

以上就是利用Nginx實現(xiàn)資源代理和接口代理的實現(xiàn)方法的詳細(xì)內(nèi)容，更多關(guān)于Nginx資源代理和接口代理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: