在 Vue 腳手架中,可以通過配置vue.config.js文件來設置代理請求,以解決跨域問題或實現其他代理需求。以下是兩種常見的配置方式:
方法一:
在vue.config.js中添加如下配置:
module.exports = {devServer: {proxy: 'http://localhost:5000' // 這里填寫后端服務器的地址和端口}
};
說明:
優點是配置簡單,請求資源時直接發送到前端的 8080 端口即可。
缺點是不能配置多個代理,且不能靈活地控制請求是否走代理。其工作方式是優先匹配前端資源,如果請求了前端不存在的資源,那么該請求會轉發給服務器。
方法二:
編寫vue.config.js配置具體代理規則:
module.exports = {devServer: {proxy: {'/api1': { // 匹配所有以'/api1'開頭的請求路徑target: 'http://localhost:5000', // 代理目標的基礎路徑changeOrigin: true,pathRewrite: {'^/api1': ''} },'/api2': { // 匹配多個代理,可添加更多target: 'http://localhost:5001', changeOrigin: true,pathRewrite: {'^/api2': ''} }}}
};
上述配置中,/api1和/api2是請求前綴,可以根據實際需求進行修改。target是代理目標的基礎路徑,即后端服務器的地址。changeOrigin用于控制請求頭中的 host 值,一般設置為true,表示代理服務器向服務器發送請求時會偽裝 host 頭。pathRewrite是一個對象,其中的鍵值對用于重寫請求路徑。例如,‘^/api1’: ''表示將前綴/api1替換為空字符串。
說明:
優點是可以配置多個代理,且可以靈活地控制請求是否走代理。
缺點是配置略微繁瑣,請求資源時必須加上前綴。
配置完成后,重啟 Vue 應用以使代理配置生效。在代碼中發送請求時,需要使用配置的前綴加上具體的接口路徑。例如,對于上述配置中的/api1前綴,請求接口/user/list時,實際發送的請求地址應為http://localhost:8080/api1/user/list。
請注意,這里的后端服務器地址和端口需要根據你的實際情況進行修改。如果你的后端服務器運行在不同的主機或端口上,將相應的值替換到配置中即可。此外,確保 Vue 腳手架已經正確安裝并且項目能夠正常運行。如果在配置過程中遇到問題,可以檢查配置的準確性、服務器是否正常運行以及網絡連接等方面。