1. 定义
在HTML 中, script 标签有两个个性质:
- script 标签可以不受同源策略的限制去访问服务器资源, 即script 标签不存在跨域问题
- script 加载的内容为JavaScript 代码时, 会立即执行一遍JavaScript 代码
我们利用这一性质从服务器中访问资源的方法叫做 JSONP
2. JSONP 解决跨域
express(app.js)
const express = require('express')
const log = console.log.bind(console)
const app = express()
app.get('/api/getuserinfo/jsonp', (request, response) => {
let query = request.query
let callback = query.callback
let name = 'oulae'
// 获取数据, 通过 jsonp 的方式传给前端
let s = `${callback}('${name}')`
response.send(s)
})
const main = () => {
let server = app.listen(2300, () => {
let host = server.address().address
let port = server.address().port
log(`应用实例，访问地址为 http://${host}:${port}`)
})
}
if (require.main === module) {
main()
}
html(crossOriginDemo.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨域demo</title>
<style type="text/css">
.ajaxButton {
100px;
height: 50px;
background: blue;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.userMoudle {
300px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.name {
auto;
}
</style>
</head>
<body>
<div class="userMoudle">
<div class="name">用户姓名:</div>
<div class="nameInfo"></div>
</div>
<script>
const changeInfo = (name) => {
let ele = document.querySelector('.nameInfo')
ele.innerHTML = name
}
</script>
<script src="http://localhost:2300/api/getuserinfo/jsonp?callback=changeInfo"></script>
</body>
</html>
执行结果
打开HTML页面之后, 我们能看到页面执行了 changeInfo 函数, 并且参数是后端给定的, script 标签加载完成之后, 页面的内容也变更了.
3. 应用场景
这种方案最常见的应用场景就是加载JavaScript 库文件或JavaScript 操作文件
