在 Vue 3 + Vite 項(xiàng)目中，配置代理是解決開發(fā)環(huán)境中跨域請求問題的常見方法。通過在 Vite 的配置文件中設(shè)置代理，可以將前端請求轉(zhuǎn)發(fā)到后端服務(wù)器，從而避免瀏覽器的同源策略限制。

1. 創(chuàng)建 Vue 3 + Vite 項(xiàng)目

首先，確保你已經(jīng)安裝了 Node.js。然后，使用以下命令創(chuàng)建一個新的 Vue 3 + Vite 項(xiàng)目：

npm create vite@latest my-vue-app --template vue

進(jìn)入項(xiàng)目目錄并安裝依賴：

cd my-vue-app
npm install

啟動開發(fā)服務(wù)器：

npm run dev

此時，開發(fā)服務(wù)器默認(rèn)運(yùn)行在 http://localhost:5173/。

2. 配置代理

在 Vite 項(xiàng)目中，代理配置位于 vite.config.js 文件中。假設(shè)你的后端服務(wù)器運(yùn)行在 http://127.0.0.1:3000，并且前端請求的路徑以 /api 開頭，你希望將這些請求代理到后端服務(wù)器。

編輯 vite.config.js，添加代理配置：

import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
});

配置說明：

• target: 代理的目標(biāo)地址，即后端服務(wù)器的地址。
• changeOrigin: 是否修改請求頭中的 Origin 字段，通常設(shè)置為 true。
• rewrite: 重寫請求路徑，將以 /api 開頭的請求路徑去掉 /api 部分，轉(zhuǎn)發(fā)到后端服務(wù)器。

3. 使用代理

在前端代碼中，發(fā)起請求時使用相對路徑 /api，例如：

import axios from 'axios';axios.get('/api/user/info').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

由于代理配置的存在，實(shí)際請求會被轉(zhuǎn)發(fā)到 http://127.0.0.1:3000/user/info。這種方式可以有效避免跨域問題。

4. 注意事項(xiàng)

• 代理配置僅在開發(fā)環(huán)境有效，生產(chǎn)環(huán)境需要通過其他方式處理跨域問題。
• 確保后端服務(wù)器已啟動，并且監(jiān)聽在配置的目標(biāo)地址上。
• 在使用代理時，前端請求的路徑應(yīng)與代理配置中的路徑匹配。

通過上述配置，你可以在 Vue 3 + Vite 項(xiàng)目中成功設(shè)置代理，解決開發(fā)環(huán)境中的跨域請求問題。