专栏首页小康的自留地通过JSONP实现跨域访问

通过JSONP实现跨域访问

跨域访问

说到跨域访问就要谈到浏览器的同源策略,所谓同源指的就是协议相同、域名相同、端口号相同,三个条件必须全部匹配,否则就会收到限制,例如:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 无法获得
  • AJAX 请求不能发送

而互联网默认原则就是同源策略,也就是说不允许跨域访问。

常见的跨域可以通过标签元素实现,例如linkscriptimgiframe等标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>

<body>
    <script>
        console.log($);
    </script>
</body>

</html>

例如如上代码,通过bootcdn的连接还是可以引用到jQuery。

JSONP

不过这篇文章的目的是为了介绍JSONP进行跨域。如何利用JSONP实现跨域?

通过动态创建 script 标签,通过 script 标签的 src 请求没有域限制来获取资源

例如在 html 页面中,将 script 标签地址改为后端接口。

网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同原政策限制;服务器收到请求后,将数据放在一个指定名的回调函数里传回来。

json才是目的,jsonp只是手段

原生JS实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    通过script元素实现JSONP跨域访问
    利用script元素的src属性制定服务器端地址
    同时将制定的回调函数名称发送指定服务器
 -->
    <script>
        function fn(data) {
            console.log(data);
            console.log(data.msg);
        }
    </script>
    <!-- 函数的声明要放在请求之上 -->
    <script src="http://127.0.0.1:3000?callback=fn"></script>
</body>

</html>
const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  // 响应数据
  // 响应的数据必须是JSON格式
  // 响应的数据作为调用的函数的参数传递
  res.end('fn({"msg":"Hello world"})');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

jQuery的getJSON方法

JQuery中的$.getjson()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据

$.getJSON('http://127.0.0.1:3000?callback=?',function(){
    console.log(data);
})

调用的函数名jQuery会自动生成。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>
    <script>
        $.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
            console.log(data);
        })
    </script>

</body>

</html>
const http = require("http");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  var urlObj = require("url").parse(req.url);
  var functionName = urlObj.query.split("&")[0].split("=")[1];
  console.log(functionName);
  res.end(`${functionName}({"msg":"Hello world"})`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

jQuery会自动生成回调函数的名称。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 四、实现跨域访问

    通过动态创建 script 标签,通过 script 标签的 src 请求没有域限制来获取资源

    Dreamy.TZK
  • 三、jQuery属性操作

    2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript

    Dreamy.TZK
  • 一、玩转Git三剑客-Git基础

    如果在一个仓库中存在local用户与全局用户,那么local用户的优先级高于全局用户信息。

    Dreamy.TZK
  • 使用SAT trace OData service实现

    Jerry Wang
  • Direct3D 11 Tutorial 1: Basics_Direct3D 11 教程1:基础

    在这第一篇教程中,我们将通过介绍创建最小Direct3D应用程序所必需的元素。每一个Direct3D应用程序必需拥有这些元素才能正常地工作。这些元素包括设置窗口...

    Zoctopus
  • CIIS 2020 | 腾讯优图与你共话「视觉内容编辑生成技术与应用」

    随着人工智能各项关键技术日益成熟,在国家创新驱动发展战略推动下,历经一场影响深远的疫情大考,智能产业革命进程加快,新的创新范式、服务形式、生产方式、商业模式在千...

    优图实验室
  • 漫画:猜数字说公牛母牛的高频面试题

    第299题:猜数字(Bulls and Cows)游戏,你写下一个数字让你的朋友猜。每次他猜测后,你给他一个提示,告诉他有多少位数字和确切位置都猜对了(称为“B...

    程序员小跃
  • like多数组模糊查询

    上面的坏处:很多时候,我们做的是标题 title的查询,而且查询的时候,要求包含 title 包含两个或者以上的词:

    php007
  • stm32微控制器开发者的福音

    因为它的创新,单片机的使用变得越来越简单了,甚至没接触过硬件的看手册也能很快掌握。它首创的提供了库函数操作所有的寄存器。是NXP,飞思卡尔,51单片机,msp4...

    特立独行的猫a
  • 聚焦“2015中国国际大数据大会”:通信业大数据论坛嘉宾演讲实录

    8月26—27日,“2015中国国际大数据大会”在北京召开。在26日下午,大会主题论坛之一“通信业大数据论坛”成功举办。论坛聚焦通信行业如何发展和开展大数据的...

    灯塔大数据

扫码关注云+社区

领取腾讯云代金券