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 ...
随机推荐
- Prometheus启动失败的问题
1.yml文件格式错误 Prometheus是开箱即用的,但是我们用的时候因为新增监控项,所以我们需要修改配置文件.改了之后启动不了的话,第一件事就要想的是yaml文件的格式问题. yaml中允许表示 ...
- Oracle - 通过dg,完成单实例到rac的迁移
一.概述 本文将介绍如何给单实例搭建一个rac dg,以及如何对其进行角色转换,完成从单实例到rac的迁移.预先具备的知识(rac搭建,单实例-单实例dg搭建) 二.实验环境介绍 主库(已有数据库实例 ...
- 记一次 Kafka 集群线上扩容
前段时间收到某个 Kafka 集群的生产客户端反馈发送消息耗时很高,于是花了一段时间去排查这个问题,最后该集群进行扩容,由于某些主题的当前数据量实在太大,在对这些主题迁移过程中话费了很长一段时间,不过 ...
- JVM 学习笔记二 :JVM内存区域
一.内存分配概述
- 「SAP技术」SAP MM 明明有维护源清单,还是不能下PO?
SAP MM 明明有维护源清单,还是不能下PO? 下午收到用户报错说,创建采购订单失败,报错 :Material ### not included in source list despite sou ...
- 2.Android-sdk目录介绍、ADT使用介绍、创建helloworld
1.android中常用名词介绍 ADT: ADT为Eclipse的插件.为Eclipse和SDK之间起了一个桥梁的作用. SDK: 软件开发工具包(Soft Development Kit),它为 ...
- Mysql相关知识总结-持续更新~~~
2019-12-11对varchar类型排序问题的解决 在mysql默认order by 只对数字与日期类型可以排序,但对于varchar字符型类型排序好像没有用了,下面我来给各位同学介绍varcha ...
- Android Healthd电池服务分析
healthd healthd是安卓4.4之后提出来的,监听来自kernel的电池事件,并向上传递电池数据给framework层的BatteryService.BatteryService计算电池电量 ...
- Zuul 详解,带视频
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- OD 快捷方式及窗口说明
OD 快捷方式 其他窗口 L : log 保存日志信息 E :程序的所有模块的信息(加载基址,大小,OEP,路径) M :程序的内存映射视图 T :线程信息 W :窗口信息 H :句柄表 C :CPU ...