跨域

1.问题出现的原因

当一个域名的网页请求另一个域名的资源(例如www.baidu.com 页面去请求 www.google.com 的资源)。则这个请求的动作就被称为跨域。
而一般情况下是不允许这么做的，这是因为浏览器的同源策略对JavaScript施加了安全的限制，不允许进行跨域操作。

如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。

2.详细定义

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

3.解决跨域

  1. 具备src的标签
    Web页面中只要标签拥有"src"属性，都能进行跨域。比如<script>、<img>、<iframe>、<link>等这几个标签是可以加载跨域（非同源）的资源，并且加载的方式其实相当于一次普通的GET请求
  2. 通过JSONP动态插入 < script >标签
    动态插入 <script>标签，通过<script>标签的 src 特性引入一个 js 文件，当这个 js 文件载入成功时会执行我们在 url 参数中指定的回调函数，并且会把我们需要的 json 数据作为参数传入。
  3. postMessage html5 跨域技术
    postMessage是HTML5 中的API，且是为数不多可以跨域操作的window属性之一，可用它来解决的问题：
var iframe= document.getElementById('iframe');
	var targetOrigin = 'http://a.com';  
	iframe.contentWindow.postMessage('coming', targetOrigin);
  1. CORS修改Http header
    在HTTP请求中添加HeaderAccess-Control-Allow-Origin，将JavaScript脚本所在域填充进去，便可向填充域的服务器请求资源。
    如果是添加了 Access-Control-Allow-Headers，则是允许携带哪个头访问，即允许前端设置的自定义头字段传递数据
    Access-Control-Allow-Methods是设置允许用的HTTP的请求方法有哪些
Access-Control-Allow-Origin: 'http://a.com'
	Access-Control-Allow-Methods:POST,GET
	Access-Control-Allow-Headers:Origin,Accept,token
  1. JSONP 回调函数和json数据
    通过动态创建script标签形式加载对应地址数据，并通过回掉函数的形式返回回来
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
  1. web sockets html5 web通信技术
    利用webSocket的API，可以直接new一个socket实例，然后利用message方法接收后台传来的数据。以此来解决跨域
var socket = new WebSockt('ws://www.baidu.com');