资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JSONP跨域请求学习

JSONP跨域请求学习

LittleLiByte / 2982人阅读

摘要：对于一直是知半解，今天利用周末整理了一下维基百科的解释我的理解是前端编写自己的函数，用标签发送请求把函数名字带上服务器端接送到请求后获取前端发送请求时的，添加上自己的数据返回后。

对于JSONP一直是知半解，今天利用周末整理了一下
维基百科的解释：

JSONP (JSON with Padding or JSON-P[1]) is a javascript pattern to request data by loading a

后端代码

//用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个月，想找一个基础的前端工作

云服务器 GPU云服务器 jsonp跨域请求 jsonp 跨域 jsonp 跨域乱码 ajax jsonp跨域传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99344.html

相关文章

  • AJAX的学习笔记

    摘要：的学习笔记是异步和的缩写，它的作用是执行异步的网络请求。这就是一个格式的，向这个地址请求，将得到一个回调函数，执行就得到数据。 AJAX的学习笔记 AJAX是异步JavaScript和XML的缩写，它的作用是执行异步的网络请求。因为JS是线性同步，如果需要用户向浏览器发送一个请求，那么就需要等浏览器接收到了结果才能继续运行，如果发送到接受的时间太长，浏览器就会很长时间处于假死状态，这样...

    RobinTang 评论0 收藏0

  • AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比

    摘要：补充同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。注意，该请求的查询字符串有一个参数，用来指定回调函数的名字，这对于是必需的。 1 前言： 首先对参考文章作者表示感谢，你们的经验总结给我们这些新手提供了太多资源。本文致力于解决AJAX的CORS问题，我在逻辑上进行了梳理：首先，系统的总结了CORS问题的起源---同源策略；其次，介绍JSONP这种仅能支持GET请求的...

    QiuyueZhong 评论0 收藏0

  • AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比

    摘要：补充同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。注意，该请求的查询字符串有一个参数，用来指定回调函数的名字，这对于是必需的。 1 前言： 首先对参考文章作者表示感谢，你们的经验总结给我们这些新手提供了太多资源。本文致力于解决AJAX的CORS问题，我在逻辑上进行了梳理：首先，系统的总结了CORS问题的起源---同源策略；其次，介绍JSONP这种仅能支持GET请求的...

    makeFoxPlay 评论0 收藏0

  • jsonp跨域获取数据实现百度搜索

    摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    Tikitoo 评论0 收藏0

  • jsonp跨域获取数据实现百度搜索

    摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    gggggggbong 评论0 收藏0

  • jsonp跨域获取数据实现百度搜索

    摘要：同源策略做了很严格的限制，但是在实际的场景中，又确实有很多地方需要突破同源策略的限制，也就是我们常说的跨域。使用跨域由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时，报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    lemanli 评论0 收藏0

发表评论

登陆后可评论

0条评论

LittleLiByte

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<