【 Ajax 】 JSONP && $.getJSON() 实现跨域访问

不倒翁丶

于 2020-09-05 13:08:28 发布

阅读量485

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46059971/article/details/108418205

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JSONP && $.getJSON() 实现跨域访问

一、跨域访问是什么？

1. 同源策略

同源：协议+ 域名 + 端口号三者相同；

不同源：协议、域名、端口号三者任意不相同，即为跨域；
a. 什么是跨域：？

跨域：当我们通过浏览器请求/发送数据时，我们需要输入请求域名（或IP）、端口号、协议（为什么是这三个因素，因为通过这三个因素我们可以唯一确定一台计算机），如果其中有一个不同，则请求就会出错，Because you 越界了。

引起跨域的原因有两个因素：
- 1. 浏览器本身的“同源策略”；
- 2. 我们请求/发送数据时，域名(或者IP) , 端口 , 协议只要有一个不同 , 便是跨域；
- Tip : 同源策略
  
  ( 1 ) 限制浏览器请求域名(或者IP) + 端口 + 协议都相同；
  
  ( 2 ) iframe 同源 : 禁止对不同源的页面DOM进行操作；
  
  ( 3 ) XmlHttpRequest 同源 , 禁止 ajax 跨域；
- Expand：
  
  通常情况下，协议大多数网站是相同的，所以根据域名的相同与否划分为：
  - 跨域>：域名相同，端口号不同；
  - 跨子域：域名不同；
b. 为什么要有跨域限制

跨域限制目的：限制浏览器的行为 , 防止CSRF(Cross Site Request Forgery ，跨域请求伪造)攻击等一些通过非正常手段获取信息。
- CSRF攻击原理
  - 1. 登录受信任网站A,并在本地生成 Cookie ；
  - 2. 在没有退出 A 的情况下 , 访问恶意网站；
  - 3. 恶意网站发起一个访问 A 站点的 ajax 请求；
  - 4. 允许跨域的话,恶意网站的请求就可以获取到A站点的 Cookie , 从而请求成功；
  - 名称解释：
    
    1. ajax 请求：一种向服务端发送请求的方法，通过这个方法你可以向服务端请求数据；
    
    2. Cookie：用于存放着个人的账号、密码、验证信息等隐私信息，如果泄露结果可想而知，就看你能不能承受了；
c. CORS 跨域资源共享

CORS：Cross-Origin Resource Sharing ，跨域资源共享，允许服务器声明那些源站有权限访问那些资源；（为HTTP头添加头部信息以实现跨域资源共享；）
- 1).简单请求
- 2).预检请求
- 3).认证请求
- TIp：为什么要有跨域限制？
  
  防止非法用户随意获取、修改数据，如果任何一个人都能看你电脑上的东西，电脑就没什么用了。

二、常见跨域访问

Such as:

<link> 元素

<script> 元素

<img> 元素

<iframe> 内联框架元素

<a> 元素

三、 JSONP（JSON with Padding) 跨域

JSONP:专门用于跨域，通过利用<script>的开放策略，网页可以得到从其他来源动态产生JSON数据。

Let’s Coding:

<!-- 客户端代码-->
<!-- 
	1.利用 script 标签的 src 属性，指定服务器端地址；
	2.用指定 函数 接收数据;
-->
<script>
	function fn(data){
        console.log(data);
    }
</script>
<script src="http://127.0.0.1:8848?callback=fn"></script>

// 服务端代码
res.end('fn({"msg":"Hello world."})');

在这里插入图片描述

四、通过 $.getJSON() 实现跨域访问

load( )

$element.get( url + callback=? , [callback] ,);
- url ：请求 HTML url地址;（callback=?:固定格式，？自动匹配对应函数名）
- callback ：请求完成时的回调函数；

Let’s Coding：

客户端 code：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax 跨域访问</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
    var success= $.getJSON('http://127.0.0.1:3000?callback=?',function(data){
        console.log(data);
    })
</script>

</body>
</html>

服务端 code：

// require http package
const http = require("http");
// create server
const server = http.createServer((req,res)=>{
    // get request‘s url
    var url = req.url;
    console.log(url)
    // if you not url package ，you need download;
    var urlObj = require('url').parse(url);
    // split get in fact url
    var funName = urlObj.query.split('&')[0].split('=')[1];
    console.log(funName);

    // set staus
    res.stausCode = 200;
    // set header
    res.setHeader('Content-Type','text/plain');

    res.end(null);

}).listen('3000','127.0.0.1',()=>{
    console.log("Server is Running at http://127.0.0.1:3000");
})

十、总结

本次学习内容：
- 1.跨域访问？；
- 2.常见跨域访问；
- 3.JSONP 实现跨域
- 4.$.getJSON() 实跨域

不倒翁丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【 Ajax 】 JSONP && $.getJSON() 实现跨域访问

Ajax 实现跨域访问一、跨域访问是什么？1. 同源策略同源：协议+ 域名 + 端口号三者相同；不同源：协议、域名、端口号三者任意不相同，即为跨域；**Tip????通常情况下，协议大多数网站是相同的，所以根据域名的相同与否划分为：跨域>：域名相同，端口号不同；跨子域：域名不同；二、常见跨域访问Such as:<link> 元素<script> 元素<img> 元素<iframe> 内联框架元素&lt
复制链接

扫一扫