問題一:怎么都鏈接不了后端地址
根據以下配置,發現怎么都鏈接不了后端地址,proxy對了呀。?仔細看,才發現host有問題
// 本地運行配置,及反向代理配置server: {host: '0,0,0,0',port: 80,// cors: true, // 默認啟用并允許任何源// open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序//反向代理配置,注意rewrite寫法,開始沒看文檔在這里踩了坑proxy: {// 本地開發環境通過代理實現跨域,生產環境使用 nginx 轉發'/api': {target: 'http://localhost/8090', // 通過代理接口訪問實際地址。這里是實際訪問的地址。vue會通過代理服務器來代理請求changeOrigin: true,ws: true, // 允許websocket代理rewrite: (path) => path.replace(/^\/api/, '') // 將api替換為空}}}
?這里是本地前端訪問地址配置,不設置默認http://127.0.0.1:5173/都可以訪問,但是如果設置了只有設置的?http://127.0.0.1:80/或者http://localhost:80/可以訪問
host: '0,0,0,0',port: 80,
問題來了:設置為port80,host:0,0,0,0或者host: '127.0.0.1',時,請求后端報404。不設置時就能正常訪問。
原因:開發服務器選項 | Vite 官方中文文檔
簡單的說就是,設置為0000或者127.0.0.1:80可能監聽的是其他服務端口,導致跨域失敗。
指定服務器應該監聽哪個 IP 地址。 如果將此設置為?0.0.0.0
?或者?true
?將監聽所有地址,包括局域網和公網地址。以下時vite官網內容:
問題二:[vite] ws proxy error: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
本來已經能成功訪問了,但是后面又報錯
15:47:05 [vite] ws proxy error:
Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
原因:發現代理的地址有問題target: 'http://localhost:8090'寫成了target: 'http://localhost/8090',服了。可能之前訪問成功也是因為改了這里
測試一下改回來:發現真的不是問題一那里的問題,噗,哈哈哈哈哈哈哈哈哈
server: {host: '127.0.0.1',//設置為0000或者127.0.0.1:80可能監聽的是其他服務端口,導致跨域失敗port: 80,// cors: true, // 默認啟用并允許任何源// open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序//反向代理配置,注意rewrite寫法,開始沒看文檔在這里踩了坑proxy: {// 本地開發環境通過代理實現跨域,生產環境使用 nginx 轉發'/api': {target: 'http://localhost:8090', // 通過代理接口訪問實際地址。這里是實際訪問的地址。vue會通過代理服務器來代理請求changeOrigin: true,ws: true, // 允許websocket代理rewrite: (path) => path.replace(/^\/api/, '') // 將api替換為空}}}