一、是什么
問題描述：
在本地開發程序中，呼叫后端程式員提供的介面獲取資料，希望將獲取的資料渲染到頁面中，但是瀏覽器報錯：
// 控制臺報錯資訊
Access to XMLHttpRequest at 'http://x.x.x.x/data/getdata'
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.
查看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配置的詳細說明
//vue.config.js
module.exports = {
devServer: {
proxy: {
//配置跨域
'/api': {
target: 'http://x.x.x.x:x/', //這里填寫專案真實的后臺介面地址
changOrigin: true, //設定允許跨域
pathRewrite: {//這個重寫不可省略！因為我們真正請求的地址并不含 /api
'^/api': ''
/* 當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/data/getdata 時
因為重寫了 /api ，所以實際上訪問的地址是：http://x.x.x.x:x/data/getdata，
*/
}
}
}
}
}
在vue專案中配置proxy解決跨域問題的原理是：將域名發送給本地的服務器（啟動vue專案的服務，localhost:8080），再由本地的服務器去請求真正的服務器，
2.在vue專案src目錄下找到main.js檔案，在創建axios實體的時候將baseURL設定為 /api ，這時候我們的跨域問題便已解決，
//main.js
import axios from 'axios'
Vue.prototype.$axios = axios
//配置請求的根路徑
axios.defaults.baseURL = '/api'
3.重新啟動專案即可獲取到資料并在頁面中顯示了，此時我們在瀏覽器查看Network中的請求資訊會看到Request URL是：http://localhost:8080/api/data/getdata，多了個 /api，但并不影響我們請求資料，
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/171721.html
標籤：其他
上一篇：造成肥胖的不良習慣
下一篇：30+的程式猿，路在何方？