记录一下VUE设置proxyTable本地代理实现跨域请求
在简书上看到一个vue抓取qq音乐数据的demo,其内容数据都是通过调取qq音乐的接口获得,由于本地项目直接使用接口会抛错,因此需要通过代理来转发请求,在vue中通过修改vue proxyTable实现跨域请求接口数据。具体配置方式如下:在confid>index.js中修改proxyTable:{}为↓↓↓proxyTable: {'/api': {...
·
在简书上看到一个vue抓取qq音乐数据的demo,其内容数据都是通过调取qq音乐的接口获得,由于本地项目直接使用接口会抛错,因此需要通过代理来转发请求,在vue中通过修改vue proxyTable实现跨域请求接口数据。
具体配置方式如下:
在confid>index.js中修改proxyTable:{}为↓↓↓
proxyTable: {
'/api': {
target: 'https://c.y.qq.com',//需要代理的地址
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址,调取接口时直接用/api代替
}
}
},
注:在vue脚手架中配置完config,请重启一下项目,再进行接口的调用测试
项目统一的api.js中对接口调用方式如下,此处参考了element-admin中对接口进行请求时利用axios过滤器的写法;
具体可参考https://github.com/PanJiaChen/vueAdmin-template/blob/master/src/utils/request.js
或axios官方文档https://www.kancloud.cn/yunye/axios/234845;
当然,请求接口也可直接在功能页面直接调用,此处不赘述
import request from '@/utils/request';// axios过滤器
//接口
export function getApi() {
return request({
url:'/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',// 代理地址下的接口
method:'get'
})
}
页面中测试接口
created() {
getApi().then((res) => {
console.log(res);
})
},
更多推荐
已为社区贡献12条内容
所有评论(0)