用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，只是簡單配置，涉及到的負載均衡，資源配置其他問題，那得更深入學習了！

總結

以上是生活随笔為你收集整理的vue解决线上跨域的问题_vue前后端分离解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。