跨域之JSONP

同源策略

同源

两个地址的协议、端口、主机名完全相同

浏览器不允许使用非同源的数据，就会产生跨域问题

解决方案（跨域）

JSONP

1. 浏览器端生成一个srcipt元素，访问数据接口
2. 服务器响应一段JS代码，调用某个函数，并把响应的数据传入

缺陷：

1. 会严重影响服务器的正常响应格式
2. 只能使用GET请求

封装函数：

index.js

function jsonp(url) {
    const script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
    script.onload = function(){
    srcipt.remove();
    };
}

function callback(data) {
    console.log(data);
}
jsonp("http://localhost:5008/api/student")

api/student.js

router.get("/", async (req, res) => {
    const page = req.query.page || 1;
    const limit = req.query.limit || 10;
    const sex = req.query.sex || -1;
    const name = req.query.name || "";
    const result = await stuServ.getStudents(page, limit, sex, name);
    const json = JSON.stringify(result);
    const script = `callback(${json})`;
    res.header("content-type", "application/javascript").send(script);
});