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. UML分析AsyncDisplayKit框架-ASMuplexImageNode异步下载时序图。

    PS:博客园图片服务器不正常工作,数据上传后服务器返回http500,园方迟迟还没解决. 我从2016-01-18 05:52向园方反馈问题-请问博客园的图片服务器有在正常运行吗,至此时2016-01 ...

  2. 如何打造一款m3u8视频爬虫

    0.前言 m3u8是一种很常见的网页视频播放器的视频源,比如说中国大学MOOC中课程就是使用了该种视频格式. 随便打开一门课程,就可以发现在网络请求中存在一个m3u8的文件,在preview中预览,它 ...

  3. Install python3

    wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz tar xf Python-3.7.4.tgz cd Python-3.7. ...

  4. SpringBoot 项目脚手架

    写在前面 之前也一直很少有写SpringBoot项目相关的文章,今天 准备整理一个我自己初始化SpringBoot项目时的一个脚手架,便于自己后面查阅.因为SpringBoot的约定大于配置,在整合各 ...

  5. ggforce|绘制区域轮廓-区域放大-寻找你的“onepiece”

    首发于“生信补给站” https://mp.weixin.qq.com/s/fm69bw-3cww1YEW_kBcTHQ 更多关于R语言,ggplot2绘图,生信分析的内容,关注有惊喜

  6. JavaScript基础目录

    一.JavaScript简介 1.JavaScript用途 2.JavaScript的诞生 3.JavaScript从丑小鸭到金凤凰 4.JavaScript非常好学 5.学习方法 二.Hello W ...

  7. Git学习笔记01--常用Git命令、cmd命令及Git总结性知识

    资源:外国网友制作的 Git Cheat Sheet 第二次学习廖雪峰老师的Git教程,学习过程中把教程中涉及到的Git命令及总结性知识记录下来方便二次复习. 知识点 所有的版本控制系统,其实只能跟踪 ...

  8. c# 基于DataTable的Compute方法的扩展

    DataTable.Compute(String, String) 方法 定义 命名空间:System.Data 程序集:System.Data.dll, netstandard.dll, Syste ...

  9. Prometheus Label 标签管理

    目录 前言 配置测试 删除metric值 重新加载配置文件后测试 更换 重新加载配置文件后测试 删除 Label 标签 前言 在prometheus监控体系中.标签label是一个极为重要的参数,考虑 ...

  10. Django中间件详解

    Django中间件详解 中间件位置 WSGI 主要负责的就是负责和浏览器和应用之家沟通的桥梁 浏览器发送过来一个http请求,WSGI负责解包,并封装成能够给APP使用的environ,当app数据返 ...