Jsonp解决跨域问题

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

然后就实现了跨域请求

转载于:https://www.cnblogs.com/yinhao-jack/p/10437289.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值