JSONP跨域要求进修

2023年1月25日 115次阅读 来源: 大橘子

关于JSONP一直是知半解，本日应用周末整理了一下
维基百科的诠释：

JSONP (JSON with Padding or JSON-P[1]) is a javascript pattern to request data by loading a <script> tag. It was proposed by Bob Ippolito in 2005.[2] JSONP enables sharing of data bypassing same-origin policy. The policy disallows running JavaScript to read media DOM elements or XHR data fetched from outside the page's origin. The aggregation of the site's scheme, port number and host name identifies as its origin.

我的明白是1、前端编写本身的函数，用script标签发送get要求把函数名字带上

2、服务器端接送到要求后猎取前端发送要求时的query，增加上本身的数据返回后。

3.、前端猎取返回的内容实在就本身的函数挪用实参是数据对象。

  • 诠释的有点懵逼没紧要，用栗子措辞。

前端代码

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<script>
    //编写挪用函数
    function getremotedata(data) {
        console.log(data);
    }
</script>
<!--用script标签get要领把数据要求发送到后端-->
<script src="http://localhost:3999/?callback=getremotedata"></script>
</body>
</html>

后端代码

//用node编写一个简朴的服务器
const http = require('http');
const urlModule = require('url');
const server = http.createServer();
server.on('request', function (req, res) {
    //urlModule.parse(req.url.url)的要求 就是这个对象
    // {
    //   protocol: null,
    //   slashes: null,
    //   auth: null,
    //   host: null,
    //   port: null,
    //   hostname: null,
    //   hash: null,
    //   search: '?callback=getremotedata',
    //   query: 'callback=getremotedata',
    //   pathname: '/',
    //   path: '/?callback=getremotedata',
    //   href: '/?callback=getremotedata' }
    // 对象构造赋值获得query是一个对象
    const {pathname: url, query} = urlModule.parse(req.url, true)
    if (url === '/') {
        var data = {
            name: '大毛',
            age: 18,
            gender: '未知'
        };
        // 剖析query的要求获得前端发送的函数称号，加上括号挪用此函数，函数里加实参servedata返回
        var scripteStr = `${query.callback}(${JSON.stringify(data)})`
        console.log(scripteStr)
        res.end(scripteStr)
    } else {
        res.end('404')
    }
});
server.listen('3999', function () {
    console.log('server is running 3999')
})
  • 如许前端发送要求，不管回调是什么，后端都邑返回回调加data数据，就完成了跨域要求啦。

第一写觉得有点语言不清，人人把代码本身敲一遍就懂了

自学前端3个月，想找一个基本的前端事情

    原文作者：大橘子
    原文地址: https://segmentfault.com/a/1190000017127342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞