跨域解决方案 - JSONP

Posted 2021-02-21 oulae

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域解决方案 - JSONP相关的知识，希望对你有一定的参考价值。

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

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 {
            width: 100px;
            height: 50px;
            background: blue;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .userMoudle {
            width: 300px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .name {
            width: 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>

执行结果