282 字
1 分钟
JSONP实现跨域
什么是JSONP
TIP
JSONP是JSON的一种’使用模式’,利用JSONP实现跨域的原理是,通过script标签向服务器端发送一个get请求,服务端返回一个text/plain格式的文件,文件内容是对一个方法的调用,并回传数据所以我们可以通过在客户端定义一个回调函数来接收数据。在回调函数中客户端就可以拿到服务端返回的数据
简单的实现:runner:
客户端:
function jsonP({ url, params }) { return new Promise((resolve, reject) => { window.callback = function (data) { resolve(data) document.body.removeChild(script) } const arrs = [] // 将参数对象转成键值对(key-value)形式 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) })}服务端(nodejs为例):
let express = require('express')let app = express()app.listen(8089)app.get('/sayHello',(req,res) => { let {wd,cb} = req.query res.end(`${cb}('hello world')`)})客户端调用:
jsonP({ url: 'http://localhost:8089/sayHello', params: { wd:'hello you' }}).then((res) => { console.log(res)})JSONP实现跨域的缺点🐛
CAUTION
- 只能发送
get请求,不支持其它请求- 不安全,有遭受
XSS攻击的风险,服务端返回的内容可以对网站内容进行篡改