前言

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

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

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

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

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

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

2. 接口代理場(chǎng)景：

   前端調(diào)用 /api/user/info 實(shí)際請(qǐng)求應(yīng)轉(zhuǎn)發(fā)到 api-backend.example.com/user/info，避免跨域問題或隱藏后端真實(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ō)明

六、常見問題排查

1. 資源無(wú)法加載，返回 403/404？

   • 是否 proxy_pass 寫法錯(cuò)誤？結(jié)尾是否缺少 /？

   • 目標(biāo)資源服務(wù)器是否校驗(yàn) Host？試試 proxy_set_header Host xxx。

   • URL 拼接是否正確？可通過(guò) curl -v 本地排查。

2. 跨域問題（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)境中建議使用白名單，避免任意源訪問。

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

• 限定訪問來(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é)

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

最新評(píng)論