這次帶給大家使用proxyTable參數代理,使用proxyTable參數代理的注意事項有哪些,下面就是實戰案例,一起來看一下。 什麼是代理跨域 瀏覽器之間有同源策略,出於安全考慮不同域之間不允許獲取數據,除了幾個特殊的例子 、、<audio>等標籤可以進行跨域但是通常都是以get的形式,如果用js的axios去遠程獲取的話進會觸發同源政策,除非你服務端的程式碼設定了header同意讓你訪問,明顯這很不合理! 。現在不是都流行前後端的分離嗎,後端程式碼跑掉了只剩下前端了,兩個次元的程式碼我前端該怎麼獲取啊,感覺使用跨域好麻煩好難搞啊還不一定搞得到,這個時候就可以用到代理跨域了</p> <p style="text-align: left;"><span style="color: #ff0000"><strong>代理跨域原理</strong></span></p> <p style="text-align: left;">所謂代理就是用後端發出http請求,就如vue的腳手架中,要運行專案你要輸入npm run dev或npm run start吧,這個指令其實打開它已經配置好的node伺服器,vue腳手架的代理就是透過node來代替前台發起http請求,既然不是瀏覽器發起的請求那不是就很容易啦? </p> <p style="text-align: left;">vue腳手架如何代理跨域,找到在config資料夾下的index.js文件,文件中有個dev,在裡面找到proxyTable{},對它進行修改</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>proxyTable: { '/api': { target: 'https://www.xxx.com/',//你要跨的域 changeOrigin: true, pathRewrite: { '^/api': '/api', }, headers:{ //这边可以堆headers进行设置 } }, },</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">其中target是你要跨域的地址,/api是你所跨的域下的下一級路徑,像上面這樣就是獲取https://www.xxx.com/api下的東西,然後我們引入一個ajax的包axios並進行ajax</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>import axios from 'axios' axios.get('/getMessage').then(()=>{})</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">上面的程式碼執行後,會自動幫你跨域獲取到https://www.xxx.com/api/getMessage的資料</p> <p>相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! </p> <p>推薦閱讀:</p> <p><a href="http://www.php.cn/js-tutorial-402104.html" target="_blank">封裝Vue2路由導航鉤子並在實戰中使用</a><br></p> <p><a href="http://www.php.cn/js-tutorial-402236.html" target="_blank" style="font-size: 14px;">node token做出使用者驗證</a><br></p>