1、安装axios
npm -install axios
2、main.js引入axios
两种方式,点击这里查看
3、在webpack配置文件index.js中配置代理
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/vue-admin/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report,
},
dev: {
env: require('./dev.env'),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
///
proxyTable: {
'/api': {
target:'http://127.0.0.1:8088', // 需要请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '/' // 替换target中的请求地址,如:访问http://127.0.0.1:8088这个地址的时候直接写成/api即可。
}
}
},
//
cssSourceMap: false
}
}
注意,我的项目运行在开发环境,所以在dev:{}中添加
4、在.vue文件中跨域访问
methods: {
//获取已办任务列表
getTasks() {
//这里通过结合 vue-axios方式使用axios,如果通过将axios改写为vue的原型属性的方式使用axios,需要将下面代码中的 this.axios 修改为 this.$http 即可,其他不变
this.axios.get('/api/activiti/doneTask').then((res) => {
this.doneTaskList=res.data;
}).catch((error) => {
alert(error);
});
},
},
5、显示返回结果,说明跨域访问成功
遇到的问题分析:
1、返回错误信息:Error: Request failed with status code 404
分析:查看请求路径,发现代理未生效,请求路径不是真正要访问的路径
参考解决办法:
(1)前台和后台需要同时允许跨域,后台接口使用@CrossOrigin注解。
(2)在build目录下webpack.dev.conf.js文件添加一下内容,让proxyTable配置生效。
module.exports = merge(baseWebpackConfig, {
devServer: {
proxy: config.dev.proxyTable
},
}
(3)http代理的插件有缓存,proxyTable的修改没有及时生效,此时需重新启动项目,如果还是不行,就更改项目端口后再启动。
(4)手动执行下面命令
npm run dev
(5)proxyTable中target处配置的地址不能正常访问,将这里配置的地址复制出来,通过浏览器地址栏直接访问,就可以判断是否为这个原因。
2、提示error,network error,通过f12查看,发现其实已经有数据返回了。
参考解决办法:
跨域访问没有设置代理,参照本文正确设置代理即可