json跨域原理

2021-09-02

jsonp跨域

原理:

1.首先要知道script标签的src属性不会收浏览去的同源策略限制

2.通过在script标签中写请求地址,相关参数,服务端开始返回相关数据

3.客户端在全局作用域里声明好相关函数,即可跨域

客户端代码:

<script>
   function fn(data) {
        console.log('跨域成功')
        console.log(data);
    }
</script>
<script src="http://127.0.0.1:8000/text?name=wuyupei&age=25&callback=fn"></script>

服务端我这里使用的express也可以使用koa进行接口的编写

服务端代码:

const express = require('express')
const app = express()

app.get('/text', (req, res) => {
    const data = {
        name: req.query.name,
        age: req.query.age
    }
    //这里必须使用JSON.stringify 因为 + 号 会调用data的toString方法 如果直接写data会参数会变成-->[object object]
    const result = 'fn(' + JSON.stringify(data) + ')'
    res.send(result)
})

app.listen('8000', (err) => {
    if (err) {
        console.log(err)
    } else {
        console.log('http://127.0.0.1:8000');
    }
})