jsonp

jsonp是一种JSON的“使用模式“，jsonp实现跨域的原理是，通过script标签向服务器端发送一个get请求，服务端返回一个text/plain格式的文件，文件内容是对一个方法的调用，并回传数据，如下：

callback("hello world!")

我们可以通过在客户端定义一个回调函数来接收数据。在回调函数中客户端就可以拿到服务端返回的数据了。

客户端实现：

function jsonP({url, params}) {return new Promise((resolve, reject) => {window.callback = function(data) {resolve(data) // 将data传给promise的thendocument.body.removeChild(script)}const arrs = []for (let key in params) {arrs.push(`${key}=${params[key]}`)}let script = document.createElement('script')script.src = `${url}?${arrs.join('&')}&cb=callback`document.body.appendChild(script)})}

服务端实现：

let express = require('express')let app = express()
app.listen(3000)
app.get('/say', (req, res) => {let {wd, cb} = req.queryres.end(`${cb}('hello world')`)
})

客户端调用：

jsonP({url: 'http://localhost:3000/say',params: {wd:'hello you'}
}).then((res) => {console.log(res)
})

缺点：

只能发送get请求，不支持post put delete
不安全，xss攻击，返回的内容可以对网站内容进行篡改

JSONP实现跨域（9种跨域方案）相关推荐

js中的几种跨域方法
js跨域指的是通过js在不同域之间进行数据传输或通讯,例如ajax通信技术,或者通过js获取页面中iframe的数据.只要有任意一个不同,则协议.域名.端口中有任意一个不同,则彼此成为不同的域. 请注 ...
JavaScript 九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全 ...
【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 本文完整的源代码请猛戳github 博客一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JavaScript 九种跨域方式实现原理 1
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全 ...
SSO的几种跨域方案
在此只是记录一下自己在尝试SSO跨域实现的过程中学到的几种跨域方案,不包含任何例子和具体的实现方法. 最近在尝试SSO的跨域,看了好多资料,然后自己记录了一下可以实现的方法: ①跳转所有站点设置coo ...
九种跨域方式的实现原理，第一个就超惊艳！| 技术头条
作者 | 浪里行舟责编 | 胡巍巍前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这正是本文要探讨的内容. 什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定, ...
Spring Boot 中三种跨域场景总结
文章目录 1.什么是跨域 2.解决方案 2.1 存在的问题 3.SpringSecurity 3.1 方式一 3.2 方式二 4.OAuth2 5.小结跨域这个问题松哥之前写过文章,但是最近收到小伙 ...
form表单会跨域_前端跨域So Easy
跨域本文主要介绍JSONP.CORS两种跨域方式,后台采用Koa模拟,真正的目标是理解整个跨域的流程.至于什么是跨域和浏览器同源策略的问题,请同学们自行百度. JSONP JSONP 其实是一种tr ...

JSONP实现跨域（9种跨域方案）

jsonp

JSONP实现跨域（9种跨域方案）相关推荐

最新文章

热门文章