282 字
1 分钟
JSONP实现跨域
2022-11-15

什么是JSONP#

TIP

JSONPJSON的一种’使用模式’,利用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攻击的风险,服务端返回的内容可以对网站内容进行篡改
JSONP实现跨域
https://blog.oceanh.top/posts/frontend/jsonp实现跨域/
作者
Ocean Han
发布于
2022-11-15
许可协议
CC BY-NC-SA 4.0
最后修改时间
2026-01-11 15:01:45