先安装依赖：cnpm install --save jsonp
代码如下：
1. 然后创建一个jsonp.js
import originJSONP from 'jsonp' //引用jsonp
export default function jsonp(url,data,options){
//地址判断和调用处理地址函数
url +=(url.indexOf('?')<0?'?':'&')+param(data)
//返回一个Promise
return new Promise((resolve,reject)=>{
originJSONP(url,options,(err,data)=>{ //用原始的jsonp调用有三个参数
if(!err){
resolve(data)
}else{
reject(err)
}
})
})
}
//创建一个函数处理地址
function param(data){
let url = '';
for(var k in data){
let value = data[k]!==undefined?data[k]:'';
url +=`&${k}=${encodeURIComponent(value)}`; //地址拼接参数
}
return url ? url.substring(1):''
}
2.自己创建个api文件夹
创建一个recomm.js，config 主要用途是处理请求地址url和头部的公共参数
代码如下：
引入刚的jsonp.js
import jsonp from ''jsonp.js文件地址；
import {commonParams,options} from 'config.js 文件地址' //把congfig.js 对象导入进来
export function getRemented(){
const url = '这个是你想要挖掘的地址' ；
//例如我想要的地址是：https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
const data = Object.assign({},commonParams,{ //这些参数都是可以在network Header 下 query string parameters有
platform:'h5',
uin:0,
needNewCode:1
})
return jsonp(url,data,options)
}
2. config.js //用途把公共的参数提取出来
代码如下：
export const commonParams = {
g_tk:5318,
inCharset: 'utf-8',
outCharset:'utf-8',
notice:0,
format:'jsonp'
}
export const options = {
param:'jsonpCallback'
}
export const ERR_OK = 0;
//在自己的模块中调用 既可以看到数据
<template>
<div id="app">
</div>
</template>
<script type="text/ecmascript-6">
import{getRemented} from '../../api/recomm'
import {ERR_OK} from '../../api/config'
export default{
data(){
return{}
},
created(){
this._getData();
},
methods:{
_getData(){
getRemented().then((res)=>{
if(res.code===ERR_OK){
console.log(res.data)
}
})
}
}
}
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
/*color: #2c3e50;*/
}
</style>
VUE解决axios跨域问题