用vue-cli腳手架搭建了個demo,前後分離就有跨域問題的出現。
vue-clie搭建demo步驟（傳送門）：
我自己在網上找了2個介面做測試：
csdn：
掘金：安裝模組axios進行ajax請求，直接請求，肯定顯示跨域，無法請求。
*************** 以下為npm run dev 跨域的解決方法 ***************
腳手架vue-cli已經幫我們留好了介面
在config目錄下的index.js檔案，有個引數：
proxytable:{}
所以，我把引數新增成：
原來介面：
csdn：
掘金：
最後，把資料列印出來，就可以了。。
*************** 以上為npm run dev 跨域的解決方法 ***************
*************** 以下為npm run build 跨域的解決方法 ***************
我們要打包上線：就用npm run build會打包成dist檔案
但發到線上，就得用nginx解決跨域。
入門命令：
在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，只是簡單配置，涉及到的負載均衡，資源配置其他問題，那得更深入學習了！
跨域問題解決方案
常用解決方案好文 源於瀏覽器的同源策略，跨域其實就是前端請求，網域名稱 協議 埠，只要其中之一不同，就會有跨域限制。下面這段引用其他博主的文章 呼叫 非跨域 呼叫 主網域名稱不同 123 456，跨域 呼叫 子網域名稱不同 abc def，跨域 呼叫 埠不同 8080 8081，跨域 1.jsonp...
跨域問題解決方案
1.目錄 為單個方法提供跨域訪問 直接新增請求頭 response.setheader access control allow origin 下面的配置可選，只配置上面一條也可以實現跨域 access control allow methods post,get,options,delete ac...
Vue專案中跨域問題解決方案
方法 1.後台更改header header access control allow origin 允許所有 訪問 header access control allow method post,get 允許訪問的方式2.使用http proxy middleware 解決 專案使用vue cli...