一.分析
(一).jsonp的方式
<script>标签里的src是没有跨域限制的,<img>标签里的src也是没有限制的,我们书写网页的过程中不难发现这一点。jsonp就是通过在本站脚本创建一个<script>便签,将地址指向第三方的API地址来达到第三方通讯的目的,并提供一个回调函数来接收数据,第三方响应为json数据的包装,这个是jsonp名字的由来(json padding)
jsonp的局限性:只支持GET方式的HTTP请求,不能解决不同域的两个页面之间如何进行JavaScript调用的问题
(二).proxyTable反向代理
本方法是在自己的浏览器创建一个服务器,然后让自己的服务器去请求目标服务器。而且跨域是针对JavaScript来说的,JavaScript 是插入HTML页面后在浏览器上执行的脚本。服务器之间是可以随便请求数据而不受限制的。我们通过自己创建的服务器去请求目标服务器,然后在从我们客户端去请求我们自己创建的服务器,这就不存在跨域了。
有关于API proxy的说明,使用的就是这个参数,请查看
二.案例使用
获取的数据接口是:
http://localhost:8084/com.ylz.jcjy/HisServlet?CLIENT_SYS_CDOE=WJ&XTKJ00=N&method=JSON&STARTPF_CODE=WJ_LOGININFO_GETLOGININFODATAS
1.config 下面的 prod.env.js
proxyTable: { //'http://localhost:8080/api/xxx' 代理到 'https://localhost:8084'
'/api': {
//target代表源地址
target: 'http://localhost:8084/com.ylz.jcjy/HisServlet',
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
}
},
2.api/api.js
import axios from 'axios'
//通用参数
export const commonParams = {
CLIENT_SYS_CDOE:'WJ',
XTKJ00:'N',
method:'JSON'
};
export const ERR_OK = 0;
export function WJ_LOGININFO_GETLOGININFODATAS(apiURL) {
const url = '/api'
const data = Object.assign({}, commonParams, {
STARTPF_CODE:apiURL
});
return axios.get(url,{
params:data
}).then((res)=>{
console.log(res)
return Promise.resolve(res.data)
})
};
3.index.vue
<script>
import {WJ_LOGININFO_GETLOGININFODATAS} from '@/api/api'
export default {
created() {
this._getUser();
},
methods: {
_getUser(){
WJ_LOGININFO_GETLOGININFODATAS('WJ_LOGININFO_GETLOGININFODATAS').then((res) => {
console.log(res)
})
}
}
}
</script>
(2).获取网上的数据
歌单的例子:
http://ustbhuangyi.com/music/api/getDiscList?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=json&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.1335220255580194
1.config 下面的 prod.env.js
proxyTable: {
'/apis/getDiscLists': {
//target代表源地址
target: 'http://ustbhuangyi.com/music/api/getDiscList',
changeOrigin: true, //允许跨域
pathRewrite: {
'^/apis/getDiscLists': ''
}
}
},
2.api/recommend.js
import axios from 'axios'
export const commonParams = {
g_tk: 1928093487,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format:'json'
};
export const options = {
param: 'jsonpCallback'
};
export const ERR_OK = 0;
//获取全部歌单的数据
export function getDiscList() {
const url = '/apis/getDiscLists'
const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,//登录的qq号
needNewCode: 0,
platform:'yqq',
hostUin:0,
sin:0,
ein:29,
sortId:5,
categoryId:10000000,
rnd:0.1335220255580194
})
return axios.get(url,{
params:data
}).then((res)=>{
return Promise.resolve(res.data)
})
}
3.recommend.vue
<script>
import {getDiscList} from '@/api/recommend'
export default {
created() {
this._getRecommend();
this._getDiscList();
},
methods: {
//获取 QQ音乐 全部歌单的数据
_getDiscList(){
getDiscList().then((res) =>{
console.log(res)
})
}
}
}
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/295037a11e5cdc1cf8dcdb2967b55ec1.png)