Jsonp解决跨域问题

Posted 2021-02-11 HAOYIN-JACK

一、安装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 }

View Code

三、调用

 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.weather
11             })
12             }
13          }
14 
15         )
16     }

View Code

然后就实现了跨域请求