JSONP实现跨域

什么是JSONP

JSONP的英文全称是 JSON with padding
值得注意的是这里的padding应当译作使用方式，因此JSONP应当译作——JSON的一种使用方式

---

JSONP的原理

由于同源策略，使得不同源的两个页面之间无法相互访问，然而HTML的script标签是个例外。利用这个特点，我们可以通过script标签来获取其它不同源网页的JSON数据——这种使用方式被称为JSONP
它的核心是绕过浏览器的同源策略

---

实现JSONP的方式

1. 比如我们用script标签请求一些数据，假设请求用户定位的信息

问题在于，script标签会被当成js代码立即执行，但我们需要的是一些数据
所以，此时就需要后端的配合了

2. 我们把script标签改一下，加上一些查询字符串

原本当后端收到这个请求时，我们希望得到一个{“name”:”bluesbonewong”,”age”:16}这种json类型的数据，但由于script标签会被当做js代码立即执行，所以我们希望后端收到请求后返回一个函数，如

showData({“name”:”bluesbonewong”,”age”:16})

那么此时前端只需要在数据返回前声明一个全局函数showData即可，如

function showData(data){
    return data
}

---

实现代码

注意修改host文件使得不同域名映射至同一个IP地址，即可测试JSONP跨域

---

服务端代码

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

var server = http.createServer(function (request, response) {
    var pathObj = url.parse(request.url, true)
    console.log(pathObj)

    switch (pathObj.pathname) {
        case '/getdata':
            var data = {"name": "bluesbonewong", "age": 16}
            response.setHeader('content-type', 'text/json;charset=utf-8')
            // 以下是重点
            if (pathObj.query.callback) {
                // 判断查询字符串中是否有callback
                response.end(pathObj.query.callback + '(' + JSON.stringify(data) + ')')
                // 返回一个 showData(JSON.stringify(data)) 函数
                console.log(data)
                // 这里data会被自动转换为对象格式{ name: 'bluesbonewong', age: 16 }双引号会被去除
                // 所以一定要用JSON.stringify()把数据转换为json格式
            } else {
                response.end(data)
            }
            // 以上是重点
            break
        // 以下不用看
        default:
            fs.readFile(path.join(__dirname, pathObj.pathname), function (error, data) {
                if (error) {
                    response.writeHead(404, 'not found')
                    response.end('
not found
')
                } else {
                    response.end(data)
                }
            })
    }
})

console.log('请在浏览器地址栏输入 localhost:8080')
server.listen(8080)

HTML代码

    
    


JSONP实现跨域

---

代码GitHub地址