當(dāng)前端和后端服務(wù)不在同一網(wǎng)段時(shí)习贫，訪問服務(wù)便會(huì)遇到跨域的問題。
使用axios 跨域配置教程
當(dāng)我們按照官方或網(wǎng)上教程配置后肌括，發(fā)現(xiàn)不生效，甚至看不到跨域的錯(cuò)酣难，比如截圖錯(cuò)誤：
image.png
排查步驟
- vue.config.js里的devServer是否配置正確
- 修改了vue.config.js里的內(nèi)容，是否有重啟下
- 使用axios的請求的url訪問路徑黑滴，是否與devServer里的proxy配置一致憨募，其實(shí)就是那個(gè)api標(biāo)識（備注：根據(jù)個(gè)人項(xiàng)目而定，不一定非得是api這名稱）
3.1 若在vue.config.js里配置是：
module.exports = {
publicPath: './', // 打包時(shí)配置袁辈，部署成功后菜谣，可訪問到index.html
devServer: {
……
proxy: { // 跨域配置
'/api': { // 過濾的api
……
}
}
}
}
}
3.2 若使用axios請求的代碼是：
axios.get('/api/logo').then((res) => {
console.log('success:' + res);
}).catch((err) => {
console.log('failed:' + err.data);
});
api標(biāo)識，這倆必須保持一致晚缩，否則就會(huì)報(bào)上圖404錯(cuò)誤尾膊。
