從零開始的Vue學習日誌 — axios 跨域問題

莊創偉
1 min readAug 16, 2019
連線對象不允許或未設定跨域存取

使用axios通常第一個會遇到的問題就是連線對象沒設定跨域存取,導致觸發瀏覽器的同源政策而回報錯誤。

解決方法有很多,如果是自己的網站可以直接在Server設定允許特定網址跨域。

但是如果是第三方資料就行不通了。由於同源政策是瀏覽器觸發,所以可以透過代理請求的方式繞過。比如由我方伺服器取得資料在回拋給前端。又或著使用<script></script>標記不檢查同源的漏洞取得資料,不過這太偏門,不是甚麼正經的作法。一般還是建議透過代理請求。

使用Vue cliwebpack模板的話,因為會連Server端都建置好了,所以可以到config中設定代理。

打開/config/index.js 找到 proxyTable: {}, 照以下內容填入

設定好後,將連線位址改為別名就可以取得資料了。

--

--

莊創偉

學海無涯。但是為了生計還是得下海的風塵男子