json解决ajax跨域的原理
- jsonp只能解决GET类型的ajax请求跨域问题
- jsonp请求不是ajax请求,而是一般的get请求
- 基本原理
- 浏览器端:
- 动态生成<script>来请求后台接口(src就是接口的url)
- 定义好用于接受响应数据的函数(fn),并将函数名通过请求参数提交给后台(如:callback=fn)
- 服务器端
- 接收到的请求处理产生结果数据后,返回一个函数调用的js代码,并将结果数据作为实参传入函数调用
- 浏览器端
- 收到响应自动执行函数调用的js代码,也就是执行了提前定义好的回调函数,并得到了需要的结果数据
- 浏览器端:
/*
jsonp请求的接口请求函数
*/
export const reqWeather= (city)=>{ return new Promise((resolve,reject) => {
const url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
//发送jsonp请求
jsonp(url,{},(err,data) =>{
console.log('json()',err,data)
//如果成功了
if(!err&&data.status===){
const {date,type} = data.data.forecast[]
resolve({date,type})
}else{
//如果失败了
message.error('获取天气信息失败')
} })
}) }
//reqWeather('武汉')
json解决ajax跨域的原理的更多相关文章
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
- e3mall商城总结11之sso系统的分析、应用以及解决ajax跨域问题
说在前面的话 一.sso系统分析 什么是sso系统 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次 ...
- 如何解决ajax跨域问题(转)
由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...
- 看小白如何解决ajax跨域问题
由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...
- 如何解决ajax跨域问题
如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...
- 如何解决Ajax跨域问题-1
如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...
- 解决ajax跨域问题的一种方法
解决ajax跨域问题的一种方法 前后端分离经常用json来传输数据,比较常见的问题就有ajax跨域请求的错误问题,这里是我的一种解决方法: 在java中加入如下的注解类: import org.spr ...
- 【前端_js】解决ajax跨域请求数据
1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...
随机推荐
- 灵魂拷问:如何检查Java数组中是否包含某个值 ?
在逛 programcreek 的时候,我发现了一些专注细节但价值连城的主题.比如说:如何检查Java数组中是否包含某个值 ?像这类灵魂拷问的主题,非常值得深入地研究一下. 另外,我想要告诉大家的是, ...
- poj 2955 Brackets (区间dp基础题)
We give the following inductive definition of a “regular brackets” sequence: the empty sequence is a ...
- Python工作好找吗?没有工作经验和学历怎么找?【就业必学】
大家都知道,随着人工智能时代的到来,Python的需求也变的越来越大了.从目前各大IT招聘网上显示招聘需求是非常大,而且薪资基本都在10k起,高的可达40-50k,当然这个要求很高,看下普遍的吧: 一 ...
- web前端分享JavaScript到底是什么?特点有哪些?
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...
- Maven使用教程二:nexus私服搭建及使用
nexus安装 从nexus官网 下载最新的安装包 1.打开命令行,切换到nexus-3.2.1-01/bin目录下,回车.例:C:\Nexus\nexus-3.2.1-01\bin 2.输入:nex ...
- NPOI 设置下拉列表
HSSFWorkbook workbook = new HSSFWorkbook();//创建工作簿 ISheet sheet = workbook.CreateSheet();//创建sheet页 ...
- Nginx配置实例-反向代理实现浏览器请求Nginx跳转到服务器某页面
场景 Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...
- ABAP分享六 alv显示的几种方式的简单示例
方法1,也是大家常见的方法通过函数 REUSE_ALV_GRID_DISPLAY TYPES: BEGIN OF ty_spfli, "定义结构 carrid like s ...
- inux 内存监控分析
一.free 查看系统总的内存情况 第一部分Mem行: total 内存总数: 3768M used 已经使用的内存数: 3136M free 空闲的内存数: 632M shared 当前已经废弃不用 ...
- 推荐一种非常好的新版DSP库源码移植方式,含V7,V6和V5的IAR以及MDK5的AC5和AC6版本
说明: 1.新版CMSIS V5.6里面的DSP库比以前的版本人性化了好多. 2.本帖为大家分享一种源码的添加方式,之前一直是用的库方便,不方便查看源码部分. 3.DSP教程可以还看第1版的,在我们的 ...