axios实现跨域及突破host和referer的限制

84 阅读 0 评论 56 点赞

我是靠谱客的博主迷人饼干，最近开发中收集的这篇文章主要介绍axios实现跨域及突破host和referer的限制，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

跨域请求设置

以qq音乐为例

配置vue.config.js


devServer: {
proxy: { // 代理跨域
'/api': { // 代理url关键字
target: 'https://c.y.qq.com', // 需要代理的地址
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': ''
}
},
'/pc': { // 代理url关键字
target: 'https://u.y.qq.com', // 需要代理的地址
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/pc': ''
},
// 突破host和origin的限制
headers: {
referer: 'https://y.qq.com/',
origin: 'https://y.qq.com'
}
}
}

ajax请求

import axios from 'axios'
// 获取轮播图数据
export function banner () {
return axios({
method: 'get',
url: '/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
params: {
// 参数
}
})
}
// 获取歌曲列表
export function songList () {
const url = '/pc/cgi-bin/musicu.fcg'
const data = Object.assign({}, commonParams, {
loginUin: 0,
hostUin: 0,
platform: 'yqq.json',
needNewCode: 0,
data: JSON.stringify({
'comm': { 'ct': 24 },
'playlist': {
'method': 'get_playlist_by_category',
'param': {
'id': 3317,
'curPage': 1,
'size': 40,
'order': 5,
'titleid': 3317
},
'module': 'playlist.PlayListPlazaServer'
}
}),
...commonParams
})
return axios({
method: 'get',
url: url,
params: data
})
}

注意请求的路径后面跟的参数一定要用params传递

在需要的组件内调用

import { banner, songList } from '../../api/store'
export default {
data () {
return {
bannerList: [],
songList: []
}
},
created () {
this.getBanner()
this.getSongList()
},
methods: {
getBanner () {
banner().then(res => {
if (res.status === 200) {
this.bannerList = res.data.data.slider
}
})
},
getSongList () {
songList().then(res => {
if (res.status === 200) {
this.songList = res
}
})
}
}
}