vue中利用jsonp进行跨域请求获取数据

1. jsonp是什么：解决了跨域问题。只支持GET，不支持POST请求。

2. jsonp原理：不是发生ajax请求，是动态处理script标签，script标签是可以跨域的。用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。

3. 下载：npm install --save jsonp

4. 引入封装：

import originJsonp from "jsonp"
export default function jsonp(url,data,option){   //url是不带参数的url路径，data是对象类型参数
			url+=(url.indexOf('?')<0?:"?":"&")+param(data);      //判断url中有没有?如果没有就拼接"?",如果有就拼接'$'然后在拼接参数，最终拼接成get传参的方式发送请求
	return new Promise((resolve,reject)=>{
		originJsonp(url,option,(err,data)=>{
			if(!err){
				resolve(data)
			}else{
				reject(err)
			}
		})
	})
}
		
function param(data){   //将对象参数data里的键值对参数拼接在路径url上
	let url=""
	for(var k in data){
		let val=data[k] !=undefined?data[k]:'';
		url+=`&{k}=${encodeURIComponent(val)}`   //url上的参数值可能为中文，所有需要encodeURIComponent编码
	}
	return url?url.substring(1):''    //如果url有数据，则去掉第一个$符号
}

5. 在组件index.vue文件中内调用：

import jsonp from "@/api/new_jsonp.js"
import {commonParams} from "@/api/config.js"   //commonParams是基本的通用的参数
var options={
	param: 'jsonpCallback'
}
created(){
    this.init()
}
methods:{
 init(){
	getRecommend().then(()=>{
		if(res.code===0){
		 			//发送请求获取成功这里进行处理
		}
	})
 },
 getRecommend(){  //通过jsonp发送跨域请求获取推荐页面的数据
	const url ="https://c.y.qq.com/musichall/fcgi-bin/fcg-yqqhomepagerecommend.fcg"  //跨域的url
	const data=Object.assign({},commonParams,{  //Object.assign()是ES6api是将后面的对象参数，写入{}中，去重，且如存在相同key后者覆盖前者。
		platform: 'h5',
		uin: 0,
		needNewCode: 1	
	})
	return jsonp(url,data,options)
 }		
}

vue中利用jsonp进行跨域请求获取数据

猜你喜欢