溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了vue使用proxyTable實現跨域的原理，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1、實現
使用vue搭建的項目在本地與后端聯調時，因為是使用node運行服務器，IP與后端不一致，所以會產生跨域問題，需要使用如JSONP、跨域代理等手段進行跨域請求，而vue已經幫我們配置好了，只需要設置一下proxyTable就行。
1.1、使用proxyTable代理
文件路徑如下，在項目根目錄下的config文件夾中的index.js中
配置代碼如下：
dev{
proxyTable: {
'/api': {
target: 'http://192.168.0.1:200', // 要代理的域名
changeOrigin: true,//允許跨域
pathRewrite: {
'^/api': '' // 這個是定義要訪問的路徑，名字隨便寫
}
}
}
使用時代碼：
// /api/getMenu相當于*http://192.168.0.1:200/getMenu
// /api相當于http://192.168.0.1:200
this.$http.get("/api/getMenu", {
}
.then(res => {
})
.catch(function(error) {
});
1.2、注意事項
以上面代碼設置的為例，會把請求中所有帶有/api字段的都替換掉，例如api/getMenu/api，前后兩個都會被替換，導致404等錯誤，在代理數量比較多的時候容易出現這個問題。
2、proxyTable原理
瀏覽器是禁止跨域的，但是服務端不禁止，在本地運行npm run dev等命令時實際上是用node運行了一個服務器，因此proxyTable實際上是將請求發給自己的服務器，再由服務器轉發給后臺服務器，做了亦曾代理，因為不會出現跨域問題。
上述內容就是vue使用proxyTable實現跨域的原理，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
