分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Jsonp解决跨域问题

发布时间:2023-09-06 02:33责任编辑:林大明关键词:跨域

一、安装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.weather11 ????????????})12 ????????????}13 ?????????}14 15 ????????)16 ????}
View Code

然后就实现了跨域请求

Jsonp解决跨域问题

原文地址:https://www.cnblogs.com/yinhao-jack/p/10437289.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved