【博学谷学习记录】超强总结，用心分享 |同源与跨域

本文链接：https://blog.youkuaiyun.com/scjiji/article/details/127530560

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

1.同源策略

同源策略，是浏览器提供的一个安全功能，它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

通俗地理解：浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，不能读取同源网页的Cookie，LocalStorage和IndexedDB；无法接触非同源的DOM；无法向非同源地址发送Ajax请求；

2.跨域

两个URL的协议，域名，端口一致是同源，反过来说就是跨域，浏览器的同源资源不允许非同源的URL进行资源的交互，但其实，浏览器允许发起跨域请求，但是跨域请求出来的数据，会被浏览器拦截，所以请求的页面获取不到数据。

3.如何实现数据请求

JSONP：出现的早，兼容性好，但是只支持GET请求，不支持POST请求。
CORS：W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，但是不兼容版本比较低的浏览器。

4.JSONP实现跨域：

1.原生Js：

//先定义一个success函数
 <script>
   function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
   }
 </script>
//通过<script>发出请求
<script src="http://www.baidu.com"></script>

需要注意的是：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

2、jQuery形式：

$.ajax({
    url: 'http://www.baidu.com',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    //可不写
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

需要注意的是：默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。