近期在使用 Vue 腳手架搭建工程后，遇到了一些困難。在打開頁面后，無法訪問到數據，控制臺也報出了一些錯誤信息。在經過排查后，我們最終找到了問題所在。

首先，我們在加載頁面時，發(fā)現控制臺一直在報錯，錯誤信息如下：

GET http://localhost:8080/api/v1/users net::ERR_CONNECTION_REFUSED

這說明我們無法訪問后端 API 接口。我們檢查了后端代碼，發(fā)現一切正常。于是我們開始排查前端代碼。

我們打開了前端的配置文件 config/index.js，發(fā)現下面的代碼：

dev: {
env: require('./dev.env'),
port: 8080,
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
},
},
}

我們注意到其中的代理設置，我們將我們的請求從“/api/v1”發(fā)送到“http://localhost:3000/api/v1”。但我們忘記了檢查后端服務是否已經啟動了。當我們檢查后端服務的運行狀態(tài)時，我們注意到我們的后端服務尚未啟動。于是，我們啟動了后端服務，并重新刷新了頁面。問題得到了解決！

這個案例告訴我們，當出現訪問失敗的問題時，我們應該從多個角度考慮原因。筒單排查可能導致我們浪費大量時間。在這里，我們學習了如何檢查前后端代碼和配置文件，以及如何正確地設置代理轉發(fā)。