七、同源策略，跨域，解决同源限制，JSONP，防抖和节流

最新推荐文章于 2024-07-30 22:36:34 发布

快乐de馒头

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量505

点赞数

分类专栏： Ajax 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/122396688

版权

(一)同源策略

1.同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：

2.同源策略

同源策略（英文全称Same origin policy）是浏览器提供的一个安全功能。所谓同源是指域名，协议，端口完全相同，只要有一个不相同则不同源，不同源即跨域

MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

① 无法读取非同源网页的Cookie、LocalStorage 和IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

(二)跨域

1.跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

网页：http://www.test.com/index.html

接口：http://www.api.com/userlist

示例代码：发起跨域的Ajax数据请求

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <script>
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/jsonp',
      data: {
        name: 'zs',
        age: 20
      },
      success: function (res) {
        console.log(res)
      }
    })  
  </script>
</body>

</html>

2.浏览器对跨域请求的拦截

注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

3.如何实现跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器

(三)解决同源限制

1.`JSONP`

JSONP (JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP 它不属于 Ajax请求，但它可以模拟Ajax 请求。

特点：

1.主要是利用了script标签的src属性天然的跨域特性来发送请求
2.它的实现方式：在发送请求的时候传递一个函数名称给后台，后台返回数据的时候会返回这个函数的调用形式，并且在()中拼接参数
3.ajax和jsonp的本质不一样。ajax的核心是通过XMLHttpRequest来发送请求，而jsonp是通过script标签来实现请求的发送

缺点：仅仅支持GET请求，不支持POST请求

语法：

$.ajax({
    url:'',
    dataType: 'jsonp',
    jsonp：'' // 发送到服务端的参数名称，默认是callback
    jsonpCallback:'' //自定义的回调函数名称，默认随机的函数，找success,
    success: function(){
    }
})

2.`CORS`

CORS：全称为 Cross-originresource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax只能同源使用的限制。

// 1.允许哪些客户端访问我
// * 代表允许所有的客户端访问我
// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
res.header('Access-Control-Allow-Origin','http://localhost:3000')
// 2.允许客户端使用哪些请求方法访问我
res.header('Access-Control-Allow-Methods', 'get,post')

3.服务器代理

浏览器发起Ajax时请求本服务器接口，本服务器的接口去请求其他非同源服务器的接口，从而让本地服务器作为中间代理

(四)`JSONP`

1.`JSONP`

JSONP (JSON with Padding) 是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP 它不属于 Ajax请求，但它可以模拟Ajax 请求。

2.`JSONP`的实现原理

由于浏览器同源策略的限制，网页中无法通过 Ajax请求非同源的接口数据。但是<script> 标签不受浏览器同源策略的影响，可以通过 src属性，请求非同源的js脚本。

因此，JSONP 的实现原理，就是通过<script>标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

示例代码：剖析JSONP的实现原理1

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

<hea

最低0.47元/天解锁文章

快乐de馒头

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
七、同源策略，跨域，解决同源限制，JSONP，防抖和节流

(一)同源策略1.同源如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：2.同源策略同源策略（英文全称Same origin policy）是浏览器提供的一个安全功能。所谓同源是指域名，协议，端口完全相同，只要有一个不相同则不同源，不同源即跨域MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜.
复制链接

扫一扫