在 Vite 開發環境中，可以通過配置代理來解決跨域問題。以下是具體步驟：
- 在項目根目錄下找到?
vite.config.js?文件：如果沒有，則需要創建一個。 - 配置代理：在?
vite.config.js?文件中，使用?server.proxy?選項來設置代理規則。例如，如果你的后端服務器運行在?http://localhost:5054?，而你的 Vite 開發服務器運行在?http://localhost:3000?，你可以這樣配置： - javascript
import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:5054',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});
上述代碼中，/api?是代理的路徑前綴。當瀏覽器發送以?/api?開頭的請求時，Vite 會將請求代理到?http://localhost:5054?上，并去除路徑中的?/api?前綴。changeOrigin?設置為?true?，表示修改請求頭中的?Origin?字段，使其與目標服務器的域名一致，以避免跨域錯誤。
4.在前端代碼中使用代理路徑：修改你的?axios?請求地址，使用代理路徑。例如：
const service = axios.create({ baseURL: '/api' });
const response = service.get('User/1/2');
這樣，原本跨域的請求就會通過代理服務器轉發，從而解決跨域問題。
如果不想在?vite.config.js?中配置代理，也可以使用瀏覽器的擴展程序來解決跨域問題，如?Allow CORS: Access-Control-Allow-Origin?等。安裝并啟用擴展程序后，它會在瀏覽器層面允許跨域請求，不過這種方法只適用于開發環境，生產環境中還是需要在服務器端進行配置。
代碼圖示
5.原理
請求攔截
瀏覽器的同源策略限制了從一個域向另一個不同域（協議、域名、端口任一不同）發起請求。在開發環境中，Vite 開發服務器可配置為代理服務器。當瀏覽器發出請求時，Vite 服務器會監聽所有請求 。如果請求的 URL 匹配在vite.config.js中配置的代理規則前綴（比如示例中的/api?），Vite 服務器就會攔截該請求，不再讓瀏覽器直接向目標地址發送請求，從而繞過瀏覽器同源策略的限制。
轉發請求
Vite 服務器攔截請求后，會將其轉發到在代理規則中指定的目標服務器（例如配置中的http://localhost:5054?）。這一過程中，Vite 服務器充當了中間人的角色，代替瀏覽器與目標服務器進行通信。由于服務器與服務器之間通信不受同源策略限制，所以能順利將請求發送到后端服務器。
改變請求源
為避免目標服務器因請求來源問題拒絕請求，Vite 服務器會修改請求頭中的Host和Origin字段 。通過將changeOrigin設置為true，Vite 服務器會調整請求的源信息，使請求看起來像是從目標服務器的域發出的，確保目標服務器能夠正常接收并處理請求。
路徑重寫
在將請求轉發到目標服務器之前，Vite 服務器會根據配置的rewrite函數對請求路徑進行重寫 。比如在示例中rewrite: (path) => path.replace(/^\/api/, '')?，會把請求路徑中匹配/api前綴的部分去除，保證請求到達目標服務器時路徑正確，使后端服務器能正確處理請求。
響應轉發
目標服務器處理完請求后，將響應返回給 Vite 服務器，Vite 服務器再把響應轉發回前端應用。前端應用接收到的響應就如同是直接從目標服務器獲取的一樣，整個代理過程對前端應用透明，前端開發者無需關心請求轉發的具體細節，只需像正常請求一樣發起請求即可。
需注意，Vite 這種代理機制主要用于開發環境，在生產環境中，通常需要后端服務正確配置 CORS（跨域資源共享） 或者將前端和后端部署在同一域下，來確保跨域請求能正常處理。
)
