使用proxyTable參數代理

這次帶給大家使用proxyTable參數代理，使用proxyTable參數代理的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是代理跨域

瀏覽器之間有同源策略，出於安全考慮不同域之間不允許獲取數據，除了幾個特殊的例子

、<script>、<audio>等標籤可以進行跨域但是通常都是以get的形式，如果用js的axios去遠程獲取的話進會觸發同源政策，除非你服務端的程式碼設定了header同意讓你訪問，明顯這很不合理！ 。現在不是都流行前後端的分離嗎，後端程式碼跑掉了只剩下前端了，兩個次元的程式碼我前端該怎麼獲取啊，感覺使用跨域好麻煩好難搞啊還不一定搞得到，這個時候就可以用到代理跨域了</script>

代理跨域原理

所謂代理就是用後端發出http請求，就如vue的腳手架中，要運行專案你要輸入npm run dev或npm run start吧，這個指令其實打開它已經配置好的node伺服器，vue腳手架的代理就是透過node來代替前台發起http請求，既然不是瀏覽器發起的請求那不是就很容易啦？

vue腳手架如何代理跨域，找到在config資料夾下的index.js文件，文件中有個dev，在裡面找到proxyTable{}，對它進行修改

proxyTable: {
   '/api': {
    target: 'https://www.xxx.com/',//你要跨的域
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api',
    },
    headers:{
     //这边可以堆headers进行设置
    }
   },
  },

其中target是你要跨域的地址，/api是你所跨的域下的下一級路徑，像上面這樣就是獲取https://www.xxx.com/api下的東西，然後我們引入一個ajax的包axios並進行ajax

import axios from 'axios'
axios.get('/getMessage').then(()=>{})

上面的程式碼執行後，會自動幫你跨域獲取到https://www.xxx.com/api/getMessage的資料

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

封裝Vue2路由導航鉤子並在實戰中使用

node token做出使用者驗證

以上是使用proxyTable參數代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！