在Vue專案開發過程中解決跨域問題

在本地開發過程中，呼叫後端程式設計師提供的介面獲取資料，希望將獲取的資料渲染到頁面中，但是瀏覽器報錯：

// 控制台報錯資訊

that is not equal to the supplied origin.

檢視network中的內容時發現xhr中該請求的狀態status為200，但是頁面中資料不顯示。

這種情況是由瀏覽器的同源策略導致的跨域問題。

跨域問題的出現是因為瀏覽器存在同源策略問題，所謂同源:即兩個頁面具有相同的協議（protocol：http、https），主機（host）和埠（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略，瀏覽器將會十分危險，隨時都可能受到攻擊。當我們請求乙個介面獲取資料的時候，出現如：「access-control-allow-origin」等報錯資訊即說明該請求跨域。

1.在vue專案根目錄下找到vue.config.js檔案（如果沒有該檔案可自己建立），在proxy中設定跨域。

更多vue.config.js相關配置可訪問vue cli 檢視配置參考

其中也有devserver和devserver.proxy配置的詳細說明


module.exports =}}
}}

在vue專案中配置proxy解決跨域問題的原理是：將網域名稱傳送給本地的伺服器（啟動vue專案的服務，localhost:8080），再由本地的伺服器去請求真正的伺服器。

2.在vue專案src目錄下找到main.js檔案，在建立axios例項的時候將baseurl設定為 /api ，這時候我們的跨域問題便已解決。


import axios from
'axios'
vue.prototype.$axios = axios
//配置請求的根路徑
axios.defaults.baseurl =
'/api'

3.重新啟動專案即可獲取到資料並在頁面中顯示了，此時我們在瀏覽器檢視network中的請求資訊會看到request url是：http://localhost:8080/api/data/getdata，多了個 /api，但並不影響我們請求資料。

在Vue專案開發過程中解決跨域問題

vue開發過程中跨域問題解決

專案開發過程中解決頁面編碼問題

vue開發過程中問題總結

在Vue專案開發過程中解決跨域問題

vue開發過程中跨域問題解決

專案開發過程中解決頁面編碼問題

vue開發過程中問題總結

相關推薦