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 ...
随机推荐
- mysql注意:
本例测试数据表 CREATE TABLE `test_student` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键自增id' ...
- 0MQ文档导读
1. 先结合RabbitMQ Tutorials,弄清0MQ socket的各种类型. 1.1. 0MQ PAIR 对应 RabbitMQ Tutorials的 "Hello world&q ...
- windows 10 上源码编译OpenCV并支持CUDA | compile opencv with CUDA support on windows 10
本文首发于个人博客https://kezunlin.me/post/6580691f/,欢迎阅读! compile opencv with CUDA support on windows 10 Ser ...
- java多线程的wait、notify/notifyAll区别
1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized ...
- day20191104笔记
MyBatis笔记: 一.MyBatis半自动ORM映射框架, 将数据库中的数据和程序中的数据进行自动映射的前提条件 1. 数据库中的字段必须和程序中的属性保持一致 2. 程序中属性的数据类型必须是基 ...
- 程序员的算法课(11)-KMP算法
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- web接口与restful规范
web接口 接口定义: 通过网络,规定了前后台信息交互规则的url链接,在web程序中也就是联系前台页面与后台数据库的媒介. 接口特点 url:长得像返回数据的url链接, 例如下面的搜索音乐 [ht ...
- xcode8 运行项目时自己打印些东西
使用 Xcode 8 运行工程的时候,在打印台会发现如下这些奇怪的日志输出: 2016-09-19 10:43:44.001757 Demo[7100:171568] subsystem: com.a ...
- PHP自动发红包代码示例
<?php header('Content-type:text'); define("TOKEN", "weixin"); $wechatObj = ne ...
- 《Dotnet9》系列-开源C# WPF控件库3《HandyControl》强力推荐
大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.我最近开始写dotnet分享文章,希望能让更多人看到dotnet的发展,了解更多dotnet技术,帮助dotnet程序员应用do ...