您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“不能通過IP地址訪問VUE項(xiàng)目的問題如何解決”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
目前項(xiàng)目是前后端分離的,VUE+SpringBoot,我拷貝下來(lái)前端項(xiàng)目在自己機(jī)器上運(yùn)行,能通過localhost+端口號(hào)訪問,但不能ton過IP地址訪問
上網(wǎng)找了很多資料,一開始以為是自己后端Java項(xiàng)目的問題,甚至在考慮tomcat的配置,可是tomcat是框架或編譯器自帶的,并不好修改.
后來(lái)發(fā)現(xiàn)應(yīng)該是前端項(xiàng)目的問題,搜索了一下果然找到了問題根源
只需要在VUE項(xiàng)目中的package.json文件中修改
scripts:dev屬性即可,
在屬性后面添加 --host 0.0.0.0
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", "start": "npm run dev", "build": "node build/build.js" }
再次嘗試,即可通過localhost訪問.也可通過IP地址訪問
首先在index.html引入搜狐查ip的接口,就像這樣,放到<body>標(biāo)簽上面(這樣就可以查到訪客的ip)
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/javascript"> sessionStorage.setItem('ip', returnCitySN["cip"]) sessionStorage.setItem('area', returnCitySN["cname"]) </script>
然后在需要獲取訪客IP的組件內(nèi)用sessionStorage.getItem()獲取ip就可以,見下圖
const IP = sessionStorage.getItem('ip')
我是采用vue的全局路由導(dǎo)航去實(shí)現(xiàn)的,代碼如下
router.beforeEach((to, from, next) => { const IP = sessionStorage.getItem('ip') // console.log(IP) // 設(shè)置訪客IP白名單 var ipList = ['192.172.172.240','182.48.114.141','163.16.50.159'] to.meta.isip = ipList.includes(IP) if(to.meta.isip){ // 如果是白名單ip,就去判斷是否登錄 if (to.meta.nologin) { next(); // console.log(1) } else { let token = sessionStorage.getItem("satoken"); if (token === null || token === '' || token === undefined) { next('/login'); // console.log(2) } else { next(); } } } else{ console.log("錯(cuò)誤ip") alert("沒有訪問權(quán)限"); closeWin(); } })
closeWin()是關(guān)閉訪問頁(yè)面的方法(也可以用 alert代替)代碼如下
closeWin() { if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) { window.location.href = "about:blank"; window.close(); } else { window.opener = null; window.open("", "_self"); window.close(); } }
“不能通過IP地址訪問VUE項(xiàng)目的問題如何解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。