Vue Dev Proxy是一個方便的開發工具,可以幫助我們在開發過程中解決跨域問題。Vue Dev Proxy適用于Vue.js項目和其他基于Webpack的項目,在開發環境中使用API數據時,不需要將API數據請求發送到生產服務器上,而是可以將請求發送到代理服務器,以解決跨域問題。
使用Vue Dev Proxy需要進行以下幾步操作:
1.安裝Vue CLI
npm install -g @vue/cli
2.創建Vue項目
vue create my-project
3.安裝Vue Dev Proxy
npm install vue-cli-plugin-proxy --save-dev
4.配置Vue Dev Proxy
//vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
}
}
在上述代碼中,我們配置了一個代理服務器,將請求發送到'http://localhost:3000'。同時,我們設置了changeOrigin為true,表示請求頭中的host會被設置為目標URL的host,pathRewrite用于重寫請求路徑。
最后,我們需要修改我們的API請求代碼,將請求地址改為代理服務器地址,在開發環境中即可正常使用。
下一篇vue detroy