Vue3 vite TypeScript跨域等相關設置
最近手頭有個涉及到vue3、vite、TypeScript的開發項目，前後端分離，前端請求後端的時候，瀏覽器調試信息裏面報跨域錯誤，通常理解跨域應該是後端設置，但是後端代碼一直沒有調整過，一翻搜索後才知要在vite.config.ts中設置proxy，這是最簡單的解決方式。
本人並非前端，不想花費太多時間去查證原委。
vite.config.ts這個文件，是vite創建vue3項目的時候生成的，示例文件如下：
1import { fileURLToPath, URL } from 'node:url'
2
3import { defineConfig, loadEnv } from 'vite'
4import vue from '@vitejs/plugin-vue'
5import vueJsx from '@vitejs/plugin-vue-jsx'
6
7// https://vitejs.dev/config/
8export default defineConfig((command, mode) => {
9
10 const env = loadEnv(mode, process.cwd(), '') // 載入環境變量防止硬編碼
11
12 console.log("env:", env) // 打印環境變量方便調試查看哪些環境變量生效了
13
14 return {
15 plugins: [vue(), vueJsx()],
16 resolve: {
17 alias: {
18 '@': fileURLToPath(new URL('./src', import.meta.url))
19 }
20 },
21 define: {
22 __APP_ENV__: env.APP_ENV,
23 },
24 server: {
25 port: env.VITE_PORT, // 前端項目運行端口
26 https: false, // https，一般開發環境不需要
27 open: true, // 運行後直接打開一個瀏覽器tab
28
29 proxy: {
30 '/api': {
31 target: env.VITE_API_SERVER_URL, // 後端api接口地址：http://127.0.0.1:8080
32 ws: false, // 關閉websocket
33 changeOrigin: true,
34 rewrite: (path) => path.replace(/^\/api/, 'api'), // 類似nginx的rewrite，看你需要在路由中匹配後保留什麼，根據需要填寫
35 },
36 '/ws': {
37 target: env.WS_API_SERVER_URL, // 後端api websocket接口地址：ws://127.0.0.1:8888
38 ws: true, // 支持websocket
39 }
40 }
41 },
42 }
43})
如上所示，配置完成後,在vue模版的的script中，使用axios庫POST請求示例，請求的目標接口爲http://127.0.0.1:8080/api/xxx/
1const results = await axios.post('/api/xxx/' ,
2 {
3 'foo1': 'bar1',
4 'foo2': 'bar2',
5 }
6).then((res) => {
7 console.log('res:',res)
8}).catch((error) => {
9 console.log('error:',error)
10})
如果你對上述配置還有疑問，可查詢官方vite官方配置文檔, 細心閱讀對應的子模塊。
最後修改於： Monday, August 28, 2023
版權申明:
- 未標註來源的內容皆為原創，未經授權請勿轉載（因轉載後排版往往錯亂、內容不可控、無法持續更新等）;
- 非營利為目的，演繹本博客任何內容，請以'原文出處'或者'參考鏈接'等方式給出本站相關網頁地址(方便讀者)。