在我們用vue做為前端開發架構時， 我們想要在local端進行debug， 如果我們要自定Debug Server的Port 同時也想在另外一台電腦debug，我們可以用以下方式來設定(vite)， 透過網路連上Debug server。
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
// https://vitejs.dev/config/
export default defineConfig({
// ...
server:{
host:"0.0.0.0",
port:4000,
proxy:{}
}
});
Host 設定
在vite.config.ts增加server:{}
Host的屬性可以選擇使用的網卡(或WiFi)IP，或是內網的網段(例 192.168.0.x)或是localhost。這裡我選擇用0.0.0.0，綁定電腦上所有的介面卡。
Host
server:{
host:"0.0.0.0",
}
Port
在port的屬性可以設定好希望Debug的 Port
server:{
port:4000,
}
如果只想指定debug的Port我們可以直接用sever.port
設定好後我們就可以在瀏覽器輸入Debug用的URL
Proxy 屬性
如果是用前後端分離的方式做開發已有現成的API HOST。 在API Host有設定安全性，都會以CORS限制連線，CORS問題，可以使用proxy設定繞過debug的CORS的檢查。在Server:{}裡設定proxy，它的設定方法類似nginx的設定。可參考以下範例:
server:{
proxy:{
// test API host
'/api': {
target: 'http://[API_HOST]:PORT/api',
changeOrigin: true,
},
// debug host
'/': 'http://localhost:5000',
}
}
當 url的path是以/api字串 的網址設定指向target， 就會導向target的網址例
http://apihost/api
瀏覽器會將Request送給Debug Server(Port 4000)，Debug Sever再向真正的API Host發送請求
changeOrigin可協助修改轉發時送給API Host的header
這樣就可以用簡單的步驟，在自己的local端，不需額外的CORS設定，與後端API配進行開發。
參考
