在開發(fā)過程中，我們經(jīng)常需要使用axios來請(qǐng)求本地的json文件，但是在這個(gè)過程中，很有可能會(huì)遇到跨域的問題。下面我們來介紹如何通過axios請(qǐng)求本地json文件，并且避免跨域問題。

// 首先需要安裝axios模塊，在終端輸入以下命令：
npm install axios
// 在代碼中引入axios模塊：
import axios from 'axios';
// 定義一個(gè)函數(shù)，用于請(qǐng)求本地json文件：
function getLocalJson() {
return axios.get('./local.json');
}
// 調(diào)用函數(shù)：
getLocalJson().then(response =>{
console.log(response.data);
}).catch(error =>{
console.error(error);
})

在上面的代碼中，我們通過使用axios來請(qǐng)求本地的local.json文件，使用的是相對(duì)路徑，路徑可以根據(jù)實(shí)際情況進(jìn)行修改。

如果在請(qǐng)求的過程中遇到了跨域問題，可以通過在vue.config.js文件中進(jìn)行配置來解決。在vue.config.js文件中添加以下代碼：

module.exports = {
devServer: {
port: 8080,
headers: {
'Access-Control-Allow-Origin': '*'
},
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}

在上面的代碼中，我們對(duì)開發(fā)服務(wù)器進(jìn)行了一些配置，具體說明如下：

• port：指定開發(fā)服務(wù)器的端口號(hào)。
• 'Access-Control-Allow-Origin': '*'：給響應(yīng)頭添加跨域請(qǐng)求的域名，‘*’表示允許所有域名跨域。
• proxy：指定代理服務(wù)器的配置，用于跨域請(qǐng)求。

最后，我們需要在axios請(qǐng)求的時(shí)候添加一個(gè)前綴，用于和代理服務(wù)器配合進(jìn)行跨域請(qǐng)求：

function getLocalJson() {
return axios.get('/api/local.json');
}

在上面的代碼中，我們?cè)谡?qǐng)求的url前面加了‘/api’前綴，代理服務(wù)器會(huì)將該請(qǐng)求轉(zhuǎn)發(fā)到真正的請(qǐng)求地址。

總結(jié)一下，通過以上幾個(gè)步驟，我們可以解決axios請(qǐng)求本地json文件遇到的跨域問題。