1. jsonp只能解决GET类型的ajax请求跨域问题
  2. jsonp请求不是ajax请求,而是一般的get请求
  3. 基本原理
    •   浏览器端:
      1.   动态生成<script>来请求后台接口(src就是接口的url)
      2.   定义好用于接受响应数据的函数(fn),并将函数名通过请求参数提交给后台(如:callback=fn)
    •   服务器端
      1.   接收到的请求处理产生结果数据后,返回一个函数调用的js代码,并将结果数据作为实参传入函数调用
    •   浏览器端
      1.   收到响应自动执行函数调用的js代码,也就是执行了提前定义好的回调函数,并得到了需要的结果数据
/*
jsonp请求的接口请求函数
*/
  import jsonp from 'jsonp'
  import { message } from 'antd'
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跨域的原理的更多相关文章

  1. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  2. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  3. e3mall商城总结11之sso系统的分析、应用以及解决ajax跨域问题

    说在前面的话 一.sso系统分析 什么是sso系统 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次 ...

  4. 如何解决ajax跨域问题(转)

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题.本篇将讲述一个小白从遇到跨域不 ...

  5. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  6. 如何解决ajax跨域问题

    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题 ...

  7. 如何解决Ajax跨域问题-1

    如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...

  8. 解决ajax跨域问题的一种方法

    解决ajax跨域问题的一种方法 前后端分离经常用json来传输数据,比较常见的问题就有ajax跨域请求的错误问题,这里是我的一种解决方法: 在java中加入如下的注解类: import org.spr ...

  9. 【前端_js】解决ajax跨域请求数据

    1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...

随机推荐

  1. CMFCPropertyGridCtrl的属性改变事件代码

    //用于区分Prop, 使用SetData, GetData方法 CMFCPropertyGridProperty* pProp1 = new CMFCPropertyGridProperty(str ...

  2. 【CSS】357- 坚定地使用 CSS Custom Properties

    自定义属性(Custom Properties)是一个很有魅力的 CSS 新特性,现代浏览器广泛 支持.但是遇到那些不支持 CSS Custom Properties 的老掉牙浏览器我们该怎么办?等着 ...

  3. pv操作与信号量详解

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...

  4. 将SD系统启动卡恢复成普通卡

    1.卸载SD卡分区 在使用fdisk命令前,请使用如下命令卸载boot分区和rootfs分区: umount /media/boot umount /media/rootfs 2.在插入SD卡前后分别 ...

  5. CCF-CSP题解 201609-3 炉石传说

    模拟. 注意随从的编号在\(summon\)和\(attack\)随从死亡时都可能改变. #include <bits/stdc++.h> using namespace std; str ...

  6. Tomcat系列(一)- 整体架构

    整体架构 我们想要了解一个框架,首先要了解它是干什么的,Tomcat我们都知道,是用于处理连接过来的Socket请求的.那么Tomcat就会有两个功能: 对外处理连接,将收到的字节流转化为自己想要的R ...

  7. day 28-1 元类

    元类 元类的用途:自定义元类控制类的创建行为及类的实例化行为 Python 中一切皆为对象. 一切接对象,对象可以怎么用呢? 1.都可以被引用,x=obj 2.都可以当作函数的参数传入 3.都可以当作 ...

  8. 由于ie浏览器ajax缓存 导致layui table表格重载失败的解决办法

    where: { time:new Date()//增加一个数据接口的额外参数→时间戳 }

  9. JS---案例:简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  10. 深度学习优质学习项目大放送!-AI Studio精选开源项目合集推荐

    近期 在AI Studio上发现了不少优质的开源深度学习项目,从深度学习入门到进阶,涵盖了CV.NLP.生成对抗网络.强化学习多个研究方向,还有最新的动态图,都以NoteBook的方式直接开源出来,并 ...