跨域

• 题目1： 什么是同源策略

同domain(或IP),同端口,同协议视为同一个域。一个域名下的脚本仅仅拥有本域内的权限，可以获取下的资源，而无法访问其他域的资源。这种安全限制成为同源策略
举例来说 http://www.example.com/dir/page.html这个网址.协议是http://,域名是www.example.com，端口默认是80（默认端口可以省略）它的同源情况如下：
-http://www.example.com/dir/other.html :同源
-http://example.com/dir/other.html :不同源(域名不同)
-http://v2.www.example.com/dir/other.html :不同源(域名不同)
-http://www.example.com:81/dir/other.html :不同源（端口不同）

• 题目2： 什么是跨域？跨域有几种实现形式

只要协议 端口 IP 有一个不同，都被当成不同的域。
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器如何沟通。CORS 基本思想就是使用了自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

• CORS实现跨域
  访问跨资源时,浏览器和服务器应该如何沟通.CORS的基本思想，使用自定义的HTTP头部让浏览器与服务器进行通信，从而决定请求或响应是否成功，还是应该失败。
  主流浏览器对CORS的实现。无需额外编写代码就可以出发这个行为。要请求与另一个域中的资源，使用标准的XHR对象并在open()中传入绝对URL即可

  
  simple_req

var xhr = new XMLHttpRequest()
xhr.onreadystatechange=function(){}
xhr.open('get','https://www.baidu.com/',true)
xhr.end(null)

• jsonp方式

jsonp只能get

• 通过动态创建script标签来构造请求

浏览器发出请求
var el = docuemnt.createElement('script‘)
el.src='https://baidu.com/user?callback=fn'
document.body.appendChild(el)

后端响应并截取callback对应的值
通过一系列手段 向 浏览器返回 fn('{"name":'23"}')

这时浏览器对应有一个全局函数window.fn=function(){}->fn=function(){}
就相当于调用了fn这个函数，并把数据当参数传递。就进行了‘跨域’

• 降域 （document.domain， 基础域名必须相同，在同一个协议，同一个端口使用）
  • 浏览器中不同域的框架是不能进行js的交互操作的
    有两个页面A http://www.example.com/a.html
    B http://example.com/b.html

 1. 在页面 http://www.expamle.com/a.html中设置document.domain
<iframe id="iframe" src="http://example.com/b.thml">
<script type="text/javascript">
 documetn.domain="example.com"
 function test（）{
alert(document.getElementById('iframe').contentWindow)
}
2. 在页面 http://expamle.com/a.html中设置document.domain
<iframe id="iframe" src="http://example.com/b.thml">
<script type="text/javascript">
 documetn.domain="example.com"
 function test（）{
alert(document.getElementById('iframe').contentWindow)
}

• HTML5的postMessage（在window窗口内使用）

window.postMessage(message,targetorigin)方法是html5新引进的特性。可以使用它来想其他的window对象发送消息。无论这个window对象是同源还是不同源。

• 题目3： JSONP 的原理是什么

jsonp只能get

通过动态创建script标签来构造请求
var el = docuemnt.createElement('script‘)
el.src='https://baidu.com/user?callback=fn'
document.body.appendChild(el)

后端响应并截取callback对应的值
通过一系列手段 向 浏览器返回 fn('{"name":'23"}')

这时浏览器对应有一个全局函数window.fn=function(){}->fn=function(){}
就相当于调用了fn这个函数，并把数据当参数传递。就进行了‘跨域’

题目4： CORS是什么

CORS(Cross-Origin Resource Sharing)，定义了在必须访问跨域资源时，浏览器与服务器要如何沟通。原理是使用自定义的的HTTP头部让浏览器与服务器沟通，从而决定请求或相应是否成功。比如在发送一个简单的get请求时，需要给它附加一个额外的origin头部，其中包含请求页面的源信息(协议 端口 域名），以便让服务器根据这个头部信息决定是否给予响应。
比如发送了一个origin头部：
Origin: http://www.jirengu.com:8080
如果服务器(后端）认为这个请求可以接受，就在Access-Control-Allow-Origin头部中发回相同的源信息：
Access-Control-Allow-Origin: http://www.jirengu:8080.com(与请求相同)

• 题目5： 根据视频里的讲解演示三种以上跨域的解决方式
  demo地址