快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

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

資源代理場(chǎng)景：

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

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

三、資源代理配置

示例目標(biāo)

將請(qǐng)求：

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)一致，避免部分資源校驗(yà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 末尾保留 /，確保路徑拼接正確。

四、接口代理配置

示例目標(biāo)

將請(qǐng)求：

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)限校驗(yà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 后帶 /，則會(huì)將匹配到的路徑直接截去 /api/，從而 /api/user/info → /user/info。

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

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

六、常見問(wèn)題排查

資源無(wú)法加載，返回 403/404？
- 是否 proxy_pass 寫法錯(cuò)誤？結(jié)尾是否缺少 /？
- 目標(biāo)資源服務(wù)器是否校驗(yàn) Host？試試 proxy_set_header Host xxx。
- URL 拼接是否正確？可通過(guò) curl -v 本地排查。
跨域問(wèn)題（CORS）？
- Nginx 不是萬(wàn)能解決方案，需要目標(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)境中建議使用白名單，避免任意源訪問(wèn)。

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

限定訪問(wèn)來(lái)源

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é)

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

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

您可能感興趣的文章: