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

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

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

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

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

cd my-vue-app
npm install

啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

此時(shí)，開(kāi)發(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，并且前端請(qǐng)求的路徑以 /api 開(kāi)頭，你希望將這些請(qǐng)求代理到后端服務(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/, ''),},},},
});

配置說(shuō)明：

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

3. 使用代理

在前端代碼中，發(fā)起請(qǐng)求時(shí)使用相對(duì)路徑 /api，例如：

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

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

4. 注意事項(xiàng)

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

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