jsonp跨域 封装通用方法

//用法如下
jsonp({
url:"http://localhost:3000/say",
params:{wd:'你好,服务端!'},
callback:'show'
}).then(data=>{
console.log(data);
}); //封装实现
function jsonp({url,params,callback}){//异步执行返回promise
return new Promise((resolve,reject)=>{
//创建script标签
let script = document.createElement('script');
//声明回调
window[callback] = function(data){
resolve(data);
//删除script标签
document.body.removeChild(script);
}
//解构参数
params = {...params,callback}
let arr = [];
//拼接处理
for(let key in params){
arr.push(`${key}=${params[key]}`)
}
script.src = `${url}?${arr.join('&')}`;
//添加到body
document.body.appendChild(script);
})
} //借鉴 珠峰架构课姜文老师
server.js
//服务端代码
let express = requeire('express');
let app = express();
app.get('/say',function(req,res){
let {wd,callback} = req.query;
res.end(`${callback}('你好!客户端')`)
})
app.listen(3000)

jsonp跨域 封装通用方法的更多相关文章

  1. jsonp跨域封装

    一.什么是同源政策? 同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI.主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来 ...

  2. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  7. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. jsonp跨域ajax跨域get方法

    原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...

  9. 通用jsonp跨域技术获取天气数据

    1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...

随机推荐

  1. java中的string对象深入了解

    这里来对Java中的String对象做一个稍微深入的了解. Java对象实现的演进 String对象是Java中使用最频繁的对象之一,所以Java开发者们也在不断地对String对象的实现进行优化,以 ...

  2. 十一、设备初始化(ADK4.0)

    1.1     首先初始化连接库 sinkConnectionInit();à ConnectionInitEx2();  theCm.task.handler = connectionBluesta ...

  3. 数据库05 使用percona软件来进行数据备份

    1.为什么要与用percona来备份 常见的MySQL备份工具 —跨平台性差 —备份时间长.冗余备份.浪费存储空间 mysqldump备份缺点: —效率较低.备份与还原速度慢,锁表(即备份数据库中的一 ...

  4. python:利用celery分布任务

    Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单.celery看起来似乎很庞大.celery适用异步处理问题,当发送邮件.或者文件上传, 图像处理等等一些比较 ...

  5. mysql的属性zerofill

    一.字段中zerofill属性的类似定义方式 SQL语句:字段名 int(M) zerofill 二.zerofill属性的作用 1.插入数据时,当该字段的值的长度小于定义的长度时,会在该值的前面补上 ...

  6. 达梦"记录超长"警告

    出现"记录超长"背景介绍: 导入数据库时,出现数据库记录超长警告,导致数据无法正常导入! 1.重新建库,把页大小改大 这种方式是在建立数据库实例的时候进行的 修改[页大小] 2.把 ...

  7. template screen

    从全局搜索主机可看到此screen

  8. k8s 获取 Pod ip 添加到环境变量

    0x00 事件 有一个需要将 Pod 自身的 ip 地址添加到环境变量的需求,可以在 yaml 文件的 env 中这样设置: env: - name: POD_OWN_IP_ADDRESS value ...

  9. linux history(命令历史)

    1.bash中默认命令记忆可达1000个.这些命令保存在主文件夹内的.bash_history中. 2.~/.bash_history:记录的是前一次登录以前所执行过的命令.至于本次登录的命令暂时存储 ...

  10. Winows下安装RabbitMQ

    RabbitMQ的简介 RabbitMQ是一套开源(MPL)的消息队列服务软件,是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开源 ...