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. java笔记 -- 乐观锁与悲观锁

    何谓乐观锁和悲观锁 乐观锁对应于生活中乐观的人总是想着事情往好的方向发展,悲观锁对应于生活中悲观的人总是想着事情往坏的方向发展.这两种人各有优缺点,不能不以场景而定说一种人好于另外一种人. 悲观锁 - ...

  2. pipelineDB学习笔记-3. Continuous Transforms (连续转换)

    以下内容为本人根据pipelineDB官网内容进行翻译,如有不妥之处请指正,谢谢大家 Continuous Transforms (连续转换) 一.定义: Continuous Transforms ...

  3. ubuntu下 fdisk用法

    Linux下的fdisk功能是极其强大的,用它可以划分出最复杂的分区,下面简要介绍一下它的用法: 对 于IDE硬盘,每块盘有一个设备名:对应于主板的四个IDE接口,设备名依次为:/dev/hda,/d ...

  4. CCF-CSP题解 201503-3 节日

    模拟题. 良心出题人并没有\(y_1>y_2\)的样例.注意闰年的处理. #include <bits/stdc++.h> using namespace std; int dayO ...

  5. 《Dotnet9》系列-开源C# Winform控件库强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  6. WebGPU学习(六):学习“rotatingCube”示例

    大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研 ...

  7. Oracle Proc编程性能优化经验

    Proc 是Oracle提供的一种数据库操作的API.它是基于ESql技术的,需要预编译后才可以变成普通c代码,非常不直观,使用起来不太方便,阅读也存在困难. 因为这些问题导致程序员平时开发中会出现一 ...

  8. 百度大脑UNIT3.0详解之数据生产工具DataKit

    在智能对话项目搭建的过程中,高效筛选.处理对话日志并将其转化为新的训练数据,是对话系统效果持续提升的重要环节,也是当前开发者面临的难题之一.为此百度大脑UNIT推出学习反馈闭环机制,提供数据获取.辅助 ...

  9. oop面向对象【接口、多态】

    今日内容 1.接口 2.三大特征——多态 3.引用类型转换 教学目标 1.写出定义接口的格式 2.写出实现接口的格式 3.说出接口中成员的特点 4.能够说出使用多态的前提条件 5.理解多态的向上转型 ...

  10. ANSIBLE安装和常用模块模块使用详细教程

    目录 ANSIBLE安装和各种模块应用功能 安装配置ANSIBLE ANSIBLE使用 ansible-galaxy工具 ansible-pull工具 ansible-playbook ansible ...