• 1. 定义
• 2. JSONP 解决跨域
• 3. 应用场景
• 4. demo 地址

1. 定义

在HTML 中, script 标签有两个个性质:

1. script 标签可以不受同源策略的限制去访问服务器资源, 即script 标签不存在跨域问题
2. 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)

    
    
    


    

        
用户姓名:
        

    
    
    

执行结果

打开HTML页面之后, 我们能看到页面执行了 changeInfo 函数, 并且参数是后端给定的, script 标签加载完成之后, 页面的内容也变更了.

3. 应用场景

这种方案最常见的应用场景就是加载JavaScript 库文件或JavaScript 操作文件

4. demo 地址

JSONP 跨域解决方案