本地开发Vue项目 用axios请求本地服务器数据,解决跨域问题
本地生成的数据 url: http://127.0.0.1/VIP_221/?c=list&cs=cp
vue项目怎么请求到我的这个数据呢?
步骤1:在文件夹config下的index.js配置proxyTable,
proxyTable: {
'/api': {
target: 'http://127.0.0.1/VIP_221/?c=list&cs=cp',//目标接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/api': ''//重写接口,后面可以使重写的新路径,一般不做更改
}
}
},
如图所示:
为什么要用proxyTable?因为跨域
在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。
用axios请求数据
首先安装axios
npm install axios --save -D
在需要用到axios的地方引入axios
运行npm run dev
可以看已经请求到数据