jsonp跨域 封装通用方法
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跨域 封装通用方法的更多相关文章
- jsonp跨域封装
一.什么是同源政策? 同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI.主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
- 通用jsonp跨域技术获取天气数据
1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...
随机推荐
- PHP 的面向对象 与 类
面向对象 == OO 学习面向对象 == XXOO;[学习使我快乐!] <!--附一个demo类的实例化--> http://note.youdao.com/noteshare?id=38 ...
- Alibaba Nacos 学习(四):Nacos Docker
Alibaba Nacos 学习(一):Nacos介绍与安装 Alibaba Nacos 学习(二):Spring Cloud Nacos Config Alibaba Nacos 学习(三):Spr ...
- 给公司写的composer包开发的规范
版本格式 主版本号.次版本号.修订号 版本号递增规则 主版本号:当你做了不兼容的 API 修改 次版本号:当你做了向下兼容的功能性新增 修订号:当你做了向下兼容的问题修正 先行版本号及版本编译元数据可 ...
- DexOpt相关的异常
查找的资料 dvm探讨之odex绕过 DexClassLoader4.4.2动态加载分析(磁盘加载分析) - ::): DexOpt: incorrect opt magic number (0xff ...
- Eclipse设置Working Set管理项目和detach合并分离窗口
当项目多了的时候,使用Working Set分组管理项目很有必要了,不然一大推项目在一起 找起来麻烦,看起来也难受~ 所以根据给项目不同分类就很有必要了. 之前myeclipse设置了,今天装了一 ...
- Sql server中用现有表中的数据创建Sql的Insert插入语句
之前,在Codeproject发表过一篇关于用现有表中数据创建Insert的Sql语句的存储过程,今天将其搬到这里来,注意本存储过程仅适用于SQL SERVER. 介绍 一些时候,你想导出一些现有表中 ...
- 创建指定python版本的虚拟环境
使用virtualenvwrapper管理虚拟环境 鉴于virtualenv不便于对虚拟环境集中管理,所以推荐直接使用virtualenvwrapper. virtualenvwrapper提供了一系 ...
- NTP服务编译安装报错:ntpd.c:124:29: 致命错误:sys/capability.h:没有那个文件或目录
缺少libcap-devel [root@localhost libcap]# cd /mnt/ [root@localhost mnt]# rpm -Uvh libcap*
- mysql如何设置主从(读写分离),redis发布功能,以及redis的持久化存储(rdb,aof)
1 mysql基本命令 1.启动mysql systemctl start mariadb 2.linux客户端连接自己 mysql -uroot -p -h 127.0.0.1 3.远程链接mysq ...
- 管道符和作业控制、shell变量、环境变量配置文件 使用介绍
第6周第1次课(4月23日) 课程内容: 8.6 管道符和作业控制 8.7/8.8 shell变量8.9 环境变量配置文件扩展bashrc和bash_profile的区别 http://ask.ape ...