当前端和后端服务不在同一网段时,访问服务便会遇到跨域的问题。
使用axios 跨域配置教程
当我们按照官方或网上教程配置后,发现不生效,甚至看不到跨域的错,比如截图错误:

排查步骤
- vue.config.js里的devServer是否配置正确
- 修改了vue.config.js里的内容,是否有重启下
- 使用axios的请求的url访问路径,是否与devServer里的proxy配置一致,其实就是那个api标识(备注:根据个人项目而定,不一定非得是api这名称)
3.1 若在vue.config.js里配置是:
module.exports = {
publicPath: './', // 打包时配置,部署成功后,可访问到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标识,这俩必须保持一致,否则就会报上图404错误。
网友评论