目录

问题描述

解决办法

步骤

---

问题描述

使用axios正常请求qq音乐后台数据出现跨域请求的错误

解决办法

使用proxy代理请求

步骤

QQ音乐接口数据请求请求网址为：

https://u.y.qq.com/cgi-bin/musics.fcg?-=recom5095827907979256&g_tk=5381&sign=zza462i4oiqso4xff15c4441255ee9ef959d8dacccc3f88&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0&data={"comm":{"ct":24},"category":{"method":"get_hot_category","param":{"qq":""},"module":"music.web_category_svr"},"recomPlaylist":{"method":"get_hot_recommend","param":{"async":1,"cmd":2},"module":"playlist.HotRecommendServer"},"playlist":{"method":"get_playlist_by_category","param":{"id":8,"curPage":1,"size":40,"order":5,"titleid":8},"module":"playlist.PlayListPlazaServer"},"new_song":{"module":"newsong.NewSongServer","method":"get_new_song_info","param":{"type":5}},"new_album":{"module":"newalbum.NewAlbumServer","method":"get_new_album_info","param":{"area":1,"sin":0,"num":20}},"new_album_tag":{"module":"newalbum.NewAlbumServer","method":"get_new_album_area","param":{}},"toplist":{"module":"musicToplist.ToplistInfoServer","method":"GetAll","param":{}},"focus":{"module":"music.musicHall.MusicHallPlatform","method":"GetFocus","param":{}}}

 

 在config文件夹下修改index.js文件中的proxyTable对象：

proxyTable: { '/api': { target: 'https://u.y.qq.com/cgi-bin', secure: false, changeOrigin: true, pathRewrite: { '^/api': '' } } }

 在.vue文件中定义axios请求参数

let url = '/api/musics.fcg?-=recom4461870836640789&g_tk=5381&sign=zzajvs4d2765maq3g80ff15c4441255ee9ef959d8dacccc3f88&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0&data={"comm":{"ct":24},"category":{"method":"get_hot_category","param":{"qq":""},"module":"music.web_category_svr"},"recomPlaylist":{"method":"get_hot_recommend","param":{"async":1,"cmd":2},"module":"playlist.HotRecommendServer"},"playlist":{"method":"get_playlist_by_category","param":{"id":8,"curPage":1,"size":40,"order":5,"titleid":8},"module":"playlist.PlayListPlazaServer"},"new_song":{"module":"newsong.NewSongServer","method":"get_new_song_info","param":{"type":5}},"new_album":{"module":"newalbum.NewAlbumServer","method":"get_new_album_info","param":{"area":1,"sin":0,"num":20}},"new_album_tag":{"module":"newalbum.NewAlbumServer","method":"get_new_album_area","param":{}},"toplist":{"module":"musicToplist.ToplistInfoServer","method":"GetAll","param":{}},"focus":{"module":"music.musicHall.MusicHallPlatform","method":"GetFocus","param":{}}}' // /api会被proxyTable中定义的target路径https://u.y.qq.com/cgi-bin替换掉 // 因此/api/musics.fcg......... 相当于https://u.y.qq.com/cgi-bin/musics.fcg......... this.$axios.get(url) .then((res) => { console.log(result) }) .catch((error) => { console.log(error) })

上面这段代码的效果就是将以/api字段起始的本地接口url请求代理到了proxyTable中定义的target路径https://u.y.qq.com/cgi-bin这一域名下： 

'http://localhost:8080/api/musics.fcg...' ===> 'https://u.y.qq.com/cgi-bin/api/musics.fcg...'

正确的路径为https://u.y.qq.com/cgi-bin/musics.fcg...，可以看到代理的路径中多了/api，因此用pathRewrite匹配/api替换为空

结果如图所示：