vue設(shè)置proxyTable參數(shù)進(jìn)行代理跨域

什么是代理跨域

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計(jì),東安網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:東安等地區(qū)。東安做網(wǎng)站價(jià)格咨詢:13518219792

瀏覽器之間有同源策略，出于安全考慮不同域之間不允許獲取數(shù)據(jù)，除了幾個(gè)特殊的例子

<img>、<script>、<audio>等標(biāo)簽可以進(jìn)行跨域但是通常都是以get的形式，如果用js的axios去遠(yuǎn)程獲取的話進(jìn)會(huì)觸發(fā)同源政策，除非你服務(wù)端的代碼設(shè)置了header同意讓你訪問，明顯這很不合理呀！?，F(xiàn)在不是都流行前后端的分離嗎，后端代碼跑掉了只剩下前端了，兩個(gè)次元的代碼我前端該怎么獲取啊，感覺使用跨域好麻煩好難搞啊還不一定搞得到，這個(gè)時(shí)候就可以用到代理跨域了

代理跨域原理

所謂代理就是代替前端而是用后端發(fā)出http請求，就如vue的腳手架中，要運(yùn)行項(xiàng)目你要輸入npm run dev或npm run start吧，這個(gè)命令其實(shí)打開它已經(jīng)配置好的node服務(wù)器，vue腳手架的代理就是通過node來代替前臺(tái)發(fā)起http請求，既然不是瀏覽器發(fā)起的請求那不是就很容易啦？

vue腳手架如何代理跨域，找到在config文件夾下的index.js文件，文件中有個(gè)dev，在里面找到proxyTable{}，對它進(jìn)行修改

proxyTable: {
   '/api': {
    target: 'https://www.xxx.com/',//你要跨的域
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/api',
    },
    headers:{
     //這邊可以堆headers進(jìn)行設(shè)置
    }
   },
  },

其中target是你要跨域的地址，/api是你所跨的域下的下一級(jí)路徑，像上面這樣就是獲取https://www.xxx.com/api下的東西，然后我們引入一個(gè)ajax的包axios并進(jìn)行ajax

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

上面的代碼執(zhí)行后，會(huì)自動(dòng)幫你跨域獲取到https://www.xxx.com/api/getMessage的數(shù)據(jù)

總結(jié)

以上所述是小編給大家介紹的vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文名稱：vue設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
本文網(wǎng)址：http://bm7419.com/article2/jcsgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、建站公司、網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)