跨域访问（JSONP）

最新推荐文章于 2024-07-29 09:35:31 发布

不苒

最新推荐文章于 2024-07-29 09:35:31 发布

阅读量286

点赞数

分类专栏： Ajax随笔文章标签： ajax

本文链接：https://blog.csdn.net/qq_49002903/article/details/109730808

版权

Ajax随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了互联网默认的同源策略，它限制了浏览器中脚本发起的跨域HTTP请求，以保护用户信息。讨论了跨域访问的概念，包括完全跨域和跨子域，并列举了HTML中允许跨域的元素如<link>、<script>、<img>和<iframe>。接着详细讲解了JSONP这一跨域解决方案，通过动态创建<script>元素实现数据传递。最后，展示了jQuery的$.getJSON()方法如何进行跨域请求。

摘要由CSDN通过智能技术生成

跨域访问

同源策略（互联网默认原则）

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。

所谓“同源”指的是“三个相同”：协议相同、域名相同以及端口相同。

域名是什么？

域名又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

跨域

描述：当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP请求。出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。

常见的跨域分为以下两种：

完全跨域：就是指一个顶级域名方向另一个顶级域名。
跨子域：相同顶级域名下的两个子级域名相互通信。

常见的跨域访问

HTML页面中一些允许指定路径的元素具有跨域特性：

<link>元素
<script>元素
<img>元素
<iframe>元素

常见的跨域访问示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见跨域访问</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3238475290,1513931108&fm=26&gp=0.jpg">
<script>
    console.log($);
</script>
</body>
</html>

JSONP

概述

JSONP是JSON的一种“使用模式“，可以用来解决主流浏览器的跨域数据访问的问题。

利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。

`<script>`元素实现跨域访问

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

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script元素实现JSONP跨域</title>
</head>
<body>
<!--
    通过<script>元素实现JSONP跨域访问
    * 利用<script>元素的src属性指定服务器端地址
    * 同时将指定的回调函数名称发送指定服务器
-->

<script>
    // 定义发送服务器端的回调函数 - 利用参数方式进行接收
    function fn(data) {
        console.log(data);
    }
</script>
<script src="http://127.0.0.1:3000?callback=fn"></script>
</body>
</html>

解析图如下：

script元素实现JSON跨域访问解析图

效果图如下：

script元素实现JSON跨域访问效果图

`$.getJSON()`方法

jQuery 中的$.getJSON()方法允许通过使用JSON形式的回调函数来嘉爱其他网络的JSON数据。

语法格式如下：

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

$.getJSON()方法的第一个参数表示url，需要在该参数后面添加“callback?”。jQuery将“?”自动替换为正确的函数名，以执行回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON实现跨域访问</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
<script>
    $.getJSON("http://127.0.0.1:3000?callback=?",function(data){
        console.log(data)
    });
</script>
</body>
</html>