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 ...
随机推荐
- ZeroC ICE的远程调用框架
想搞清楚slice为我们生成了什么样的框架代码,就先搞明白Ice的远程调用框架暗中为我们做了些什么? Ice将Ice Object的方法调用分为三个阶段(或步骤),分别是begin,process和e ...
- ubuntu server 1604 配置网络信息
对于新安装的linux 服务器(ubuntu server 1604) 一,配置网络 连接网线与路由器 查看系统的网卡信息 ifconfig -a //列出所有的网卡信息,不管启用还是没有启用的 ...
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
- C/C++ 条件编译静态库
==>windows 下方法: 1.方法一:VS工程中中直接添加 1.1在VS的属性->常规->附加库目录,添上文件夹的路径:例如:lib/x64: 1.2输入的附加依赖项,添加上库 ...
- 2019-10-16:渗透测试,基础学习,burpsuit笔记
maccms10后门分析下载网址,是假官网http://www.maccmsv10.com/download.htmlMaccms10基于php+mysql的maccms,是苹果的内容管理,方便使用, ...
- Java基础-Java基本语法
注释: 1:多行 /* */ 2:单行 // 3:文档 /** */ 基本数据类型: 1:整形 byte(1) short(2) int(4) long(8)(一般申明lo ...
- Ubuntu 一键伪装成Win 10,Kali Linux 2019 kali-undercover软件嫁接;
今天,下午刷手机的时候,突然看到kali出了一个非常新颖的主题:该主题可以使得kali系统伪装成windows 10而变得低调起来:就像下面这样: 具体新闻链接:https://www.freebuf ...
- Mybatis拦截器实现原理深度分析
1.拦截器简介 拦截器可以说使我们平时开发经常用到的技术了,Spring AOP.Mybatis自定义插件原理都是基于拦截器实现的,而拦截器又是以动态代理为基础实现的,每个框架对拦截器的实现不完全相同 ...
- Selenium+Java(九)Selenium键盘与鼠标事件
一.键盘事件 ctrl+a driver.findElement(By.id("kw")).sendKeys(Keys.CONTROL, "a"); ctrl+ ...
- 10-kubernetes serveraccount RBAC
目录 认证安全 serviceAccountName 和 userAccount serviceaccount 创建 使用admin 的SA 测试 URL访问kubernetes资源 APIserve ...