跨域

一，跨域：

从浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，理解为跨域现象；
1，为什么会存在跨域？

① 安全问题
如果一个网页可以随意地访问另外一个网站，那么就有可能在客户完全不知情的情况下出现安全问题，如以下例子：
（1）用户访问www.mybank.com ，登陆并进行网银操作，cookie有时会保存在浏览器，若弹出一个垃圾网站；垃圾网站根据cookie对用户的账号进行操作，如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了，造成用户各类损失；
②为什么要跨域
你在做开发的时候，你的文件夹下的文件不是在一个域下面的，当你一个文件需要发送ajax请求，请求另外一个页面的内容的时候，就会跨域。如果不搭服务器，又想要ajax请求的话是不得不跨越。。跨域的作用就是让你能访问不是一个域的文件
2，同源策略

同源策略（Same originpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

所有支持JavaScript 的浏览器
同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
即检查是否同源，只有和百度同源的脚本才会被执行。 [1]
如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

二，如何解决跨域问题

一共有六种方式：（仅供参考）
1、jsonp跨域
JSONP（JSON with Padding：填充式JSON)，应用JSON的一种新方法，
JSON、JSONP的区别：
　1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
　2、JSONP 只支持get请求、不支持post请求
　(类似往页面添加一个script标签，通过src属性去触发对指定地址的请求,故只能是Get请求)

 $('button').click(function () {
          // jsonp跨域
            $.ajax({
                url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
                dataType: 'jsonp',
            })
        })
        function list(data) {
            console.log(data)
        }   

2、nginx反向代理：
　　www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口www.baidu.com/server.php，由这个接口在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html
3、PHP端修改header
　　header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
　　header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
４、document.domain
跨域分为两种，一种xhr不能访问不同源的文档，另一种是不同window之间不能进行交互操作;
　　document.domain主要是解决第二种情况，且只能适用于主域相同子域不同的情况；
　　document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。
兼容性：所有浏览器都支持；
优点：
　可以实现不同window之间的相互访问和操作；
缺点：
　只适用于父子window之间的通信，不能用于xhr；
　只能在主域相同且子域不同的情况下使用；
使用方式：
　不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：
５、window.name
关键点：

window.name在页面的生命周期里共享一个window.name;

1. 兼容性：所有浏览器都支持； 优点： 　最简单的利用了浏览器的特性来做到不同域之间的数据传递； 　不需要前端和后端的特殊配制；
2. 缺点： 　大小限制：window.name最大size是2M左右，不同浏览器中会有不同约定；
3. 安全性：当前页面所有window都可以修改，很不安全； 　数据类型：传递数据只能限于字符串，如果是对象或者其他会自动被转化为字符串，

６、postMessage
关键点：
　postMessage是h5引入的一个新概念，现在也在进一步的推广和发展中，他进行了一系列的封装，我们可以通过window.postMessage的方式进行使用，并可以监听其发送的消息；
兼容性：移动端可以放心用，但是pc端需要做降级处理
优点
　不需要后端介入就可以做到跨域，一个函数外加两个参数（请求url，发送数据）就可以搞定；
　移动端兼容性好；
缺点
　无法做到一对一的传递方式：监听中需要做很多消息的识别，由于postMessage发出的消息对于同一个页面的不同功能相当于一个广播的过程，该页面的所有onmessage都会收到，所以需要做消息的判断；
安全性问题：三方可以通过截获，注入html或者脚本的形式监听到消息，从而能够做到篡改的效果，所以在postMessage和onmessage中一定要做好这方面的限制；
　发送的数据会通过结构化克隆算法进行序列化，所以只有满足该算法要求的参数才能够被解析，否则会报错，如function就不能当作参数进行传递；

跨域（jsonp）都是今天新接触的知识点，以下几种方案，秧子继续充电的，感谢某大神借阅，感谢阅读！