一、前言

在前后端分離架構(gòu)中，前端訪問(wèn)后端資源（尤其是圖片、文件等靜態(tài)資源）的反向代理配置是一個(gè)常見(jiàn)且容易踩坑的問(wèn)題。最近在開(kāi)發(fā)一個(gè) Vue3 + .NET8 的項(xiàng)目時(shí)，我就遇到了開(kāi)發(fā)環(huán)境配置正常，但部署到生產(chǎn)環(huán)境后圖片無(wú)法訪問(wèn)的問(wèn)題。本文將詳細(xì)記錄這個(gè)問(wèn)題的解決過(guò)程，并給出開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的完整代理配置方案。

二、問(wèn)題場(chǎng)景

• 前端：Vue3 項(xiàng)目，運(yùn)行在 80 端口
• 后端：.NET8 WebAPI，運(yùn)行在 5005 端口
• 需求：前端通過(guò) http://domain.com/upload/xxx.jpg 訪問(wèn)后端 http://domain.com:5005/upload/xxx.jpg 的圖片資源

開(kāi)發(fā)環(huán)境下使用 Vite 的代理配置工作正常，但部署到生產(chǎn)環(huán)境后出現(xiàn) 404 錯(cuò)誤。

三、開(kāi)發(fā)環(huán)境配置（Vite）

在 vite.config.ts 中的配置如下：

export default defineConfig({
  server: {
    proxy: {
      '^/[Uu]pload': {
        target: 'http://localhost:5005',
        changeOrigin: true,
      }
    }
  }
})

這個(gè)配置實(shí)現(xiàn)了：

• 匹配所有以 /upload 或 /Upload 開(kāi)頭的請(qǐng)求
• 轉(zhuǎn)發(fā)到后端服務(wù) http://localhost:5005
• changeOrigin: true 處理跨域問(wèn)題

四、生產(chǎn)環(huán)境配置（Nginx）

4.1 初始錯(cuò)誤配置

我最初嘗試的 Nginx 配置：

location /upload {
    proxy_pass http://localhost:5005/upload;
}

這個(gè)配置會(huì)導(dǎo)致路徑重復(fù)拼接，訪問(wèn) http://domain.com/upload/xxx.jpg 實(shí)際會(huì)轉(zhuǎn)發(fā)到 http://localhost:5005/upload/upload/xxx.jpg，顯然不正確。

4.2 正確配置方案

經(jīng)過(guò)研究和實(shí)踐，正確的 Nginx 配置應(yīng)該是：

server {
    listen 80;
    server_name domain.com;
    
    # 前端靜態(tài)資源
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # 代理上傳文件請(qǐng)求
    location ~* ^/upload {
        proxy_pass http://localhost:5005;
        proxy_set_header Host $host;
        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;
    }
}

4.3 配置解析

1. location ~* ^/upload：
   • ~* 表示不區(qū)分大小寫(xiě)的正則匹配
   • 匹配所有 /upload 或 /Upload 開(kāi)頭的請(qǐng)求
2. proxy_pass：
   • 直接指向后端地址，不加 /upload 后綴
   • 這樣會(huì)保留原始請(qǐng)求路徑
3. proxy_set_header：
   • 傳遞必要的請(qǐng)求頭信息
   • 確保后端能獲取到真實(shí)的客戶端信息

4.4 高級(jí)配置選項(xiàng)

1. 路徑重寫(xiě)
   如果后端接口路徑與前端的路徑不一致，可以使用 rewrite 規(guī)則：

location ~* ^/upload {
    rewrite ^/upload/(.*) /api/upload/$1 break;
    proxy_pass http://localhost:5005;
}

• 負(fù)載均衡
  如果后端有多臺(tái)服務(wù)器：

upstream backend {
    server 192.168.1.101:5005;
    server 192.168.1.102:5005;
}

location ~* ^/upload {
    proxy_pass http://backend;
}

• 靜態(tài)資源緩存
  對(duì)圖片等靜態(tài)資源啟用緩存：

location ~* ^/upload {
    proxy_pass http://localhost:5005;
    proxy_cache my_cache;
    proxy_cache_valid 200 304 1h;
    proxy_cache_key "$scheme$request_uri";
}

五、常見(jiàn)問(wèn)題排查

1. 404 Not Found

• 檢查后端服務(wù)是否真的存在該文件
• 確認(rèn) Nginx 的轉(zhuǎn)發(fā)路徑是否正確
• 查看 Nginx 錯(cuò)誤日志：tail -f /var/log/nginx/error.log

2. 權(quán)限問(wèn)題
   確保 Nginx 有權(quán)限訪問(wèn)后端服務(wù)：

chmod -R 755 /path/to/upload
chown -R www-data:www-data /path/to/upload

• 緩存問(wèn)題
  強(qiáng)制刷新瀏覽器緩存：Ctrl + F5

六、開(kāi)發(fā)環(huán)境 vs 生產(chǎn)環(huán)境對(duì)比

七、總結(jié)

通過(guò)本文的配置，我們實(shí)現(xiàn)了：

1. 開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境一致的代理行為
2. 不區(qū)分大小寫(xiě)的路徑匹配
3. 完整的請(qǐng)求頭傳遞
4. 靈活的路徑重寫(xiě)能力

關(guān)鍵點(diǎn)在于理解 Nginx 的 proxy_pass 行為：

• 當(dāng) proxy_pass 包含 URI 時(shí)，會(huì)替換 location 匹配的部分
• 當(dāng) proxy_pass 不包含 URI 時(shí)，會(huì)保留原始請(qǐng)求路徑

希望這篇指南能幫助你順利解決前后端分離項(xiàng)目中的反向代理問(wèn)題。

以上就是Vue3本地環(huán)境Vite與生產(chǎn)環(huán)境Nginx反向代理配置方法匯總的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Vite與Nginx反向代理配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論