一、前言

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

二、問題場景

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

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

三、開發(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 開頭的請求
• 轉(zhuǎn)發(fā)到后端服務(wù) http://localhost:5005
• changeOrigin: true 處理跨域問題

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

4.1 初始錯(cuò)誤配置

我最初嘗試的 Nginx 配置：

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

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

4.2 正確配置方案

經(jīng)過研究和實(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;
    }
    
    # 代理上傳文件請求
    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ū)分大小寫的正則匹配
   • 匹配所有 /upload 或 /Upload 開頭的請求
2. proxy_pass：
   • 直接指向后端地址，不加 /upload 后綴
   • 這樣會(huì)保留原始請求路徑
3. proxy_set_header：
   • 傳遞必要的請求頭信息
   • 確保后端能獲取到真實(shí)的客戶端信息

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

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

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

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

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

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

• 靜態(tài)資源緩存
  對圖片等靜態(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";
}

五、常見問題排查

1. 404 Not Found

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

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

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

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

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

七、總結(jié)

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

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

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

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

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

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

最新評論