react中跨域请求天气预报接口数据
背景故事:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,
如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,
浏览器只是针对同源策略的一种实现。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
页面展示:
我们页面上会展示一个日期时间及天气情况,我们怎么实现这两个功能呢?
1:关于日期:我用一个工具类来封装我们的日期函数,最后再页面上再调用
新建utils文件夹及utils文件,我们导出一个formate函数
export default {
formateDate(time){
if(!time)return '';
let date=new Date(time)
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'--'+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
}
}
希望在我们的页面上展示这个日期函数,我们需要
componentWillMount(){
this.setState({
userName:'jser'
})
setInterval(()=>{
let sysTime=Util.formateDate(new Date().getTime())
this.setState({
sysTime
})
},1000)
}
<span className="date">{this.state.sysTime}</span>
关于天气的展示,我们用到了百度天气api,它的使用就是通过请求http://api.map.baidu.com/telematics/v3/weather?location。。。获取数据。
这个时候,我的浏览器环境是本地的URL地址,我怎么能够请求到百度的地址呢?又不是同源的。这个时候,就要用到我们的jsonp了。
通过yarn add jsonp --save
我们来对jsonp方法做一封装,让所有地方都能使用
import JsonP from 'jsonp'
export default class Axios{
static jsonp(options){
return new Promise((resolve,reject)=>{
JsonP(options.url,{
param:'callback'
},function(err,response){
if(response.status=='success'){
resolve(response)
console.log(response)
}else{
reject(response.message)
}
})
})
}
}
我们通过import axios from '../../axios'引入这个文件,封装我们的jsonp方法,接着在我们的项目中使用
getWeatherAPIData(){
let city="深圳"
axios.jsonp({
url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak='神奇
}).then((res)=>{
//项目公共机制
console.log(res)
if(res.status=='success'){
let data=res.results[0].weather_data[0];
this.setState({
dayPictureUrl:data.dayPictureUrl,
weather:data.weather
})
}
})
}
接着让数据展示即可
<img src={this.state.dayPictureUrl} alt=""/>
</span>
<span className="weather-detail">
{this.state.weather}
</span>
react中跨域请求天气预报接口数据的更多相关文章
- HTML中跨域请求天气粗略效果
HTML中跨域请求天气粗略效果 html+css部分: <style> table{ border:1px red solid; border-collapse: collapse; ma ...
- js中跨域请求原理及2种常见解决方案
一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...
- JSONP分享-- 在JavaScript中跨域请求
如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...
- JSONP 跨域请求 - 获取JSON数据
如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- WebApi中跨域请求的解决方案和原理
跨域请求仅发生在JavaScript发起Ajax请求时,浏览器对请求的限制,通常只允许访问同一个域中的资源,或者目标服务器明确的通知浏览器允许该域访问资源. 那么什么叫跨域的:主机地址或者ip地址或者 ...
- webpack中跨域请求proxy代理(vue与react脚手架不同设置方法)
因为浏览器有同源策略的限制,导致我们在本地开发的时候,请求不同域名的接口会存在跨域的问题 解决跨域的问题有很多方式,这里主要整理下代理模式来解决跨域的问题 代理方式能够实现的机制大体: 本地服务器 - ...
- VUE 使用axios请求第三方接口数据跨域问题解决
VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...
- React中跨域问题的完美解决方案
针对react版本^16.6.0有多种解决方案 方案一:package.json中加上proxy代理配置 在packge.json加入 "proxy": "http:// ...
随机推荐
- 前端安全之XSS
XSS定义 XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻 ...
- <a>标签中href="javascript:;"** 为什么 style不用src**
&src/href <!--href 用于标示资源和文档关系,src 用于替换标签内容--> <img src="xxx.jpg"/> <sc ...
- 20135323符运锦----LINUX第三次实践:程序破解
程序破解 一.掌握NOP.JNE.JE.JMP.CMP汇编指令的机器码 ①NOP:NOP指令即"空指令".执行到NOP指令时,CPU什么也不做,仅仅当做一个指令执行过去并继续执行N ...
- Linux内核分析(第七周)
可执行程序的装载 一.预处理.编译.链接和目标文件的格式 1.可执行程序怎么来的? 预处理: gcc -E -o hello.cpp hello.c -m32 *负责把include的文件包含进来及宏 ...
- kNN算法学习(一)
1.首先需要一些训练样本集,例如一道问题(数据)及答案(标签),可以看做一条样本,那么多条,就是样本集 当然这里应该是一条数据及该数据所属的分类,该类别称为标签 2.现在我们已经知道数据与所属类别的对 ...
- eclispe file查找
今天查找一段js代码时在本页内找不到,所以需要在整个工程下寻找. 过程如下
- NullPointerException-----开发中遇到的空指针异常
1.使用CollectionUtils.isEmpty判断空集合 public class TestIsEmpty { static class Person{} static class Girl ...
- WIN10护眼色
参看文章:http://www.xitongcheng.com/jiaocheng/win10_article_10326.html WIN10:[HKEY_CURRENT_USER\Control ...
- 修复PLSQL Developer 与 Office 2010的集成导出Excel 功能
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.htm]"PerceivedType"="text&qu ...
- python threading模块使用 以及python多线程操作的实践(使用Queue队列模块)
今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码 自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...