一、問題描述

在本地開發過程中，調用后端提供的接口獲取數據將獲取的數據渲染到頁面中，但是瀏覽器報錯：

// 控制臺報錯信息 Access to XMLHttpRequest at 'http://x.x.x.x/app/v1_0/user/followings' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://x.x.x.x:8080' that is not equal to the supplied origin.

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

跨域問題的出現是因為瀏覽器存在同源策略問題，所謂同源:即兩個頁面具有相同的協議（protocol：http、https），主機（host）和端口（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略，瀏覽器將會十分危險，隨時都可能受到攻擊。當我們請求一個接口獲取數據的時候，出現如：“Access-Control-Allow-Origin” 等報錯信息即說明該請求跨域。

二、解決方案

在vue項目根目錄下找到vue.config.js文件（如果沒有該文件可自己創建），在proxy中設置跨域。
vue官方參考文檔vue-config-js

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

在vue項目中，在創建axios實例的時候將baseURL設置為 /api ，這時候我們的跨域問題便已解決。

重新啟動項目便解決了報錯問題，此時我們在瀏覽器查看Network中的請求信息會看到Request URL是：http://localhost:8080/api/app/v1_0/user/followings，多了個 /api，但并不影響我們請求數據。

配置完成后的訪問路徑為：

原來的訪問路徑為： http://ttaxxxx.xxx.cn/app/v1_0/user/followings

總結

以上是生活随笔為你收集整理的Vue项目开发过程中解决跨域问题（vue.config.js结合axios）的全部內容，希望文章能夠幫你解決所遇到的問題。

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