今天在開發中遇到有點小問題,vue+Java後端進行調試時如何解決跨域問題,下面小編給大家分享解決方法,有興趣的朋友一起看看吧
#今天在開發過程中遇到一個問題,拿到了一套vue程式碼,計畫對這套程式碼的部分樣式進行調整,Java後端程式碼已經寫好並且部署到了線上。這時命令列執行vue專案時存取會受限,取不下資料來,遇到了跨網域存取失敗的問題,這時可以怎麼做呢?
首先,要了解什麼叫做跨網域存取?
跨網域,指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對javascript施加的安全限制。
所謂同源是指,域名,協議,端口均相同,舉例:
http://www.123.com/index.html 調用http://www.123.com/server.php (非跨網域)
http://www.123.com/index.html 呼叫http://www.456.com /server.php (主網域不同:123/456,跨網域)
#http://abc.123.com/index.html 呼叫http://def.123.com/server .php(子網域不同:abc/def,跨網域)
http://www.123.com:8080/index.html 呼叫http://www.123.com:8081 /server.php (連接埠不同:8080/8081,跨域)
#http://www.123.com/index.html 呼叫https://www.123.com/server. php (協定不同:http/https,跨域)
請注意:localhost和127.0.0.1雖然都指向本機,但也屬於跨域。
知道了跨域的概念之後我們要如何解決他呢?
我這裡的情況是這樣的,後端在伺服器上,但是vue在本地運行,網路上有很多的跨域代理工具,但是都比較麻煩。因為vue-cli 鷹架工具已經幫我們做了處理,只要稍微設定一下,就可以輕鬆解決跨網域問題。
我們打開config/index.js 文件,找到以下程式碼:
#在proxyTable: {}配置代理,設定訊息如下:
proxyTable: { '/project_dzff/': { target: 'http://120.92.45.71/', //域名 secure: false, changeOrigin: false, } },
代理程式配置之後,再去修改專案的呼叫介面位址的信息,讓他呼叫我們配置好的東西。
serverRoot: env === 'development' ? '/project_dzff' : env === 'production' ? '/project_dzff' : 'https://debug.url.com'
這裡由原先造訪http://120.92.45.71/調整為存取project_deff,也就是我們自己定義的名字了。
這時我們運行vue項目,如圖:
#這時基本上訪問已經成功代理到本地了,這時就可以使用本地的vue專案存取伺服器端的資料了!
總結
以上是解決vue+Java後端進行偵錯時的跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!