Vue-cli+axios: 跨域


家園工作室的學長給了一個用於在面試時作為重要依據的任務,搞一個readhub的仿站,初步的思路:

1.使用vue-router來進行頁面路由切換,相關配置參考

2.axios從api接口獲取數據

3.預處理器選擇less,eslint暫且擱置一邊,等大致完成了來調整

4.獲取數據后使用數據的內容生成頁面

截至目前存在的問題:

1.特殊跨域,jsonp跨域,api接口不知cb名稱,proxyTable跨域,返回空數據(本篇解決)

2.點擊新聞項目后會在url后拼接項目json數據的id值,這個要咋做?要笨笨的點擊后修改url並且切換界面嗎?有待考慮  已解決,就是嵌套路由嘛

3.下拉加載更早新聞,這個可以用監測頁面滾動條距離頁面底部距離來實現,但是我每次請求只返回最新的20條數據,要咋辦?

嘗試着去官網用netword看了一下,

在下拉到一定程度會返回這個請求數據,是否是根據加載前的最后一條數據的id來判定的誒?

 

感覺充滿了期待?雖然在完成的路上還要踩不少的坑,摔得鼻青臉腫是免不了的,但或許我能學到不少東西?比如axios和promise就是這幾天現學的

 

 

實際上關於vue-cli+axios跨域的相關文章一抓一大把,但我遇到的這個坑可能是太微小了,沒有怎么出現,我在思否翻了幾頁才看到這個小細節。

相關配置:

再三確認沒有問題之后npm run dev,但是返回的東西真的讓我一口老血噴出來

我數據呢??我密密麻麻的數據呢??去哪了??

 

注意到請求路徑是localhost:8080/api/topic,感覺應該是路徑的問題,再次查了一圈后:

axios.defaults.baseURL便為配置的端口,因此會被附在前面,於是對其進行了修改,修改后的兩個文件:

 

 

返回了正常的數據:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM