跨域实践之jsonp实现跨域

jsonp实现跨域是一种十分普遍的方法，它利用的是script标签里的src属性可以跨域请求的功能来实现跨域，那这篇博客就来实践一下jsonp这种方法

既然要跨域，那我们先来看下不用jsonp,直接请求的结果

        let xhr = new XMLHttpRequest()
        let getDate = (data) =>{
            console.log(data)
        }
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response)
                console.log(JSON.parse(data))
            }
        }
        xhr.open('post', 'http://localhost:4000', true)
        xhr.send()

 

很显然，由于浏览器的同源策略，响应被阻挡了，以至于我们无法获取到服务端传来的数据

接下来，我们改用jsonp试试，客户端的代码如下，我们可以看到，url的最后带上了callback,这是jsonp的关键，我们会在服务端解析出这个callback的值，然后利用字符串的拼接，把客户端需要的数据，传给callback,把拼接好的字符串返回后，客户端就会调用这个callback函数，在本例中callback函数是getData, 我们可以在callback中实现我们的逻辑

    <script>
      let getData = (data)=>{
          console.log(data)
      }
    </script>
    <script src="http://localhost:4000?callback=getData"></script>

服务端代码

 

const http = require("http");

http.createServer((req, res)=>{
    let url = ''
    urls = req.url.split('?')
    let callback = ''
    if(urls[0] === '/') {
        // 取出callback的值
        urls[1].split('&').forEach((val)=>{
            let value = val.split('=')
            if(value[0] === 'callback')
                callback = value[1]
        })
        // 利用字符串的拼接传递数据
        res.end(callback + '({' + 'name: "yewenjun",age: 21' + '})')
    }
}).listen(4000);

console.log('server listening on port 4000')

再次请求查看结果

请求成功！！

但是jsonp这种方法，在没有服务端的帮助下是无法实现的，遇到这种请求，我们要用node代理实现跨域的数据获取，具体实现看我的另一篇博客

https://blog.csdn.net/dreamjay1997/article/details/88669051

希望对你们有帮助