用Vue-cli腳手架搭建了個demo,前後分離就有跨域問題的出現。
vue-clie搭建demo步驟(傳送門):https://www.cnblogs.com/wangenbo/p/8487764.html
我自己在網上找了2個接口做測試:
CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false
掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1
安裝模塊axios進行ajax請求,直接請求,肯定顯示跨域,無法請求。
=============== 以下爲npm run dev 跨域的解決方法 ===============
腳手架Vue-cli已經幫我們留好了接口
參考這篇文章才知道:https://blog.csdn.net/qq_31201781/article/details/78778193
在config目錄下的index.js文件,有個參數:
proxyTable:{}
所以,我把參數添加成:
原來接口:
CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false
掘金:https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1
請求鏈接就變成這樣了:
最後,把數據打印出來,就可以了。。
=============== 以上爲npm run dev 跨域的解決方法 ===============
=============== 以下爲npm run build 跨域的解決方法 ===============
我們要打包上線:就用npm run build會打包成dist文件
但發到線上,就得用nginx解決跨域。
首先,下載nginx
https://blog.csdn.net/biaoge0310/article/details/78900538
入門命令:
在ngix文件目錄下執行以下命令
start nginx 開啓ngix
nginx -s quit 退出
nginx -s reload 重啓
nginx -t 檢查配置文件是否成功
然後:進入nginx/conf目錄下的,找到nginx.conf文件
添加如下配置:
啓動ngix服務器: start nginx
輸入網址:http://localhost:8099
完美!!!!打包後也解決了。。
=============== 以上爲npm run build 跨域的解決方法 ===============
不過,nginx,只是簡單配置,涉及到的負載均衡,資源配置其他問題,那得更深入學習了!