跨域（跨源）(一)

源:

域名:www.baidu.com,等同于http:// 119.75.217.109 为ip的别名
端口:类似于不同店铺
协议:http/https,ftp,file..

同源策略(Same origin policy）:

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
可以说Web是构建在同源策略基础之上的，
浏览器只是针对同源策略的一种实现。

是为了保证用户信息的安全，防止恶意的网站窃取数据

同源

同域名、同端口、同协议

跨源:

不同域名、不同端口、不同协议

解决跨域方案:

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

方法1：服务器代理

原理:
a能访问b,b能访问c，就等同于a能访问c
a:前端请求
b:同源下的后端文件
c:第三方数据
比如:http://www.baidu.com
http://www.kaola.com/getSuggestKeyword.html?query=猫&size=10

缺点：
第三如果改了，那么你自动也会改

方法2： JSONP

JSONP是JSON with Padding的略称，是一个非官方的协议。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

动态创建 <script> 标签，设置其src，回调函数在src中设置：

window.onload = function(){
    document.onclick = function(){
        let oS = document.createElement('script');
        oS.src = 'https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse';
        h.appendChild(oS);
        //fn([1,2,3]);
    }
}

jsonp 原理总结：

后端传给前端的数据为函数名 + 括号的把数据放入括号中
前端需要在全局放一个函数去接收
当需要数据的时候，动态创建script标签，通过url的方式去访问后端
```
script标签又能解析js，所以等同于函数调用
```
jsonp的优点：
```
兼容非常好
```