前端jsonp方式解决跨域问题

462 阅读1分钟

原理:<script>标签是一个很古老的标签,带有src属性,而src能访问任何域。 前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function handeEvent (data) {
            console.log(data,'接收到后台返回来的数据')
        }
        //创建script元素
        const scriptDom = document.createElement('script');
        //添加.src属性,赋值就是就是你想访问的协议、域名、端口。
        //拼接参数callback=handeEvent
        scriptDom.src = `http://localhost:3000/detail_test?callback=handeEvent`
        //将scriptDom追加进body元素中。
        document.body.append(scriptDom)
    </script>
</body>
</html>

node.js代码:

//引入http服务
const http = require('http');
const querystring = require('querystring')
//创建服务
const server = http.createServer((req, res)=>{
    const path = req.url.split('?')[0];
    req.path = path;
    const query = req.url.split('?')[1];
    req.query = querystring.parse(query)
    if (req.method === "GET" || path=== "/detail_test") {
       let person = {
         name: 'zs',
         age: 18
       }
       //取出callback属性,就是前端传过来的
       //req.query.callback就是前端的handeEvent函数,拼接括号跟参数,返回给给前端
        let callback2 = req.query.callback+'('+ JSON.stringify(person)+')'
        res.end(callback)
    }
})
server.listen(3000, ()=>{
    console.log('OK')
})