标签：操作文件   拉取   http   标签   参数   evel   style   css   express   

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. 代码演示

1. github 地址:https://github.com/ouleWorld/studyDemo/tree/master/codeDevelopDemo/crossOrigin
2. 拉取整个项目, 然后将expressDemo/app.js 替换为上述app.js 文件; crossOriginDemo.html替换为上述crossOriginDemo.html文件
3. 运行expressDemo 后端模块
4. 运行crossOriginDemo.html 文件

跨域解决方案 - JSONP

标签：操作文件   拉取   http   标签   参数   evel   style   css   express   

原文地址：https://www.cnblogs.com/oulae/p/12784187.html