假設(shè)我們有一個(gè)本地的json文件，路徑為：/mock/data.json。在使用axios發(fā)送請(qǐng)求時(shí)，我們遇到了跨域的問(wèn)題。

一種常見(jiàn)的解決方案是在本地啟動(dòng)一個(gè)服務(wù)器，然后將json文件放在服務(wù)器上。但如果我們不想這樣做，我們可以使用webpack-dev-server來(lái)模擬一個(gè)服務(wù)器。

首先，在項(xiàng)目根目錄下創(chuàng)建一個(gè)mock文件夾，在該文件夾中創(chuàng)建一個(gè)data.json文件，并填入以下內(nèi)容：

{
"name": "小明",
"age": 18,
"gender": "male"
}

接下來(lái)，在webpack配置文件中增加以下代碼：

devServer: {
contentBase: './dist', // 服務(wù)器的根目錄為dist
before(app) { // 在發(fā)送請(qǐng)求前做些什么
app.get('/api/data', (req, res) =>{ // 模擬服務(wù)器接口
res.json(require('./mock/data.json'))
})
},
},

在上述代碼中，我們定義了一個(gè)api/data接口，用于返回data.json文件中的內(nèi)容。接下來(lái)，在頁(yè)面中使用axios發(fā)送請(qǐng)求：

axios.get('/api/data')
.then((response) =>{
console.log(response.data)
})
.catch((error) =>{
console.log(error)
})

在上述代碼中，我們使用axios發(fā)送了一個(gè)get請(qǐng)求到/api/data接口，并打印了返回的數(shù)據(jù)。此時(shí)，我們?cè)跒g覽器中運(yùn)行該頁(yè)面，即可成功獲取到本地的json數(shù)據(jù)。