一、安装Jsonp
npm install jsonp --save
二、封装组件
建一个axios文件夹,创建index.js文件
1 import Jsonp from ‘jsonp‘ 2 import ?axios from ‘axios‘ 3 import {Modal} from ‘antd‘ 4 export default ?class Axios{ 5 ?????static jsonp(options){ 6 ??????return ??new Promise((resolve,reject)=>{ 7 ?????????????Jsonp(options.url,{ 8 ?????????????????param:‘callback‘ 9 ?????????????},function(err,response){10 ????????????????if(response.status === ‘success‘){11 ????????????????????resolve(response);12 ????????????????}else{13 ????????????????????reject(response.message);14 ????????????????}15 ?????????????})16 ?????????})17 ?????}18 19 }
三、调用
1 ????getWeatherAPIData(){ 2 ????????let city=‘北京‘ 3 ????????axios.jsonp({ 4 ????????????url:‘http://api.map.baidu.com/telematics/v3/weather?location=‘+encodeURIComponent(city)+‘&output=json&ak=3p49MVra6urFRGOT9s8UBWr2‘ 5 ????????}).then((res)=>{ 6 ????????????if(res.status === ‘success‘){ 7 ????????????let data =res.results[0].weather_data[0]; 8 ????????????this.setState({ 9 ????????????????dayPictureUrl:data.dayPictureUrl,10 ????????????????weather:data.weather11 ????????????})12 ????????????}13 ?????????}14 15 ????????)16 ????}
然后就实现了跨域请求
Jsonp解决跨域问题
原文地址:https://www.cnblogs.com/yinhao-jack/p/10437289.html