一、浏览器的同源策略
在web应用的安全模型中是一个重要概念。在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。源是由协议，域名，端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
（限制http请求和Ajax请求，两者的不同点在于Ajax较Http在请求头中请求多了一个“X-Requested-With：XMLHTTPRequest”属性，）
对于普遍依赖于cookie维护授权用户session的现代浏览器来说，这种机制有特殊意义。客户端必须在不同站点提供的内容之间维持一个严格限制，以防丢失数据机密或者完整性。
参考链接：https://www.imooc.com/article/5621
https://www.cnblogs.com/JoeChan/p/4524114.html
https://www.jianshu.com/p/beb059c43a8b
二、跨域
注：两个页面不同原的情况下，一个页面向另一个页面发送请求，也会得到响应数据，但由于浏览器同源策略的限制，将不会给与显示，并且报错！！！
跨域常见的方式：
1、Jsonp
（1）JOSNP允许页面接受另一个域的JSON数据，通过在页面增加一个可以从其它域加载带有回调的JSON响应的<script>标签。
（2）jsonp实质：在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。
举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：
{"id":123,"name":张三,"age":17}
那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：
foo({"id":123,"name":张三,"age":17});
当然，如果服务端考虑得更加充分，返回的数据可能如下：
try{foo({"id":123,"name":张三,"age":17});}catch(e){}
这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：
便可以使用foo函数来调用返回的数据了。
callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}callback(data){ console.log(data);// 上面的加载完成之后就会打印出后台传过来的数据 "数据"}（3）实现jsonp*三步走战略*完整的格式
2、CORS
在服务器端设置：Access-Control-Allow-Origin：‘*’
注：*是允许所有 ;
也可以设置为一个地址如：”http:1992.1.1.1:8888“表示只能允许此地址跨域访问
注：利用预请求方式，即使设置了CORS即Access-Control-Allow-Origin：‘*’，但浏览器让然有好多限制不让其跨域，如请求头，请求方式，请求内容格式，利用Access-Control-Allow-Header，Access-Control-Allow-Header等可以打破对跨域的限制，则称为预请求，高速浏览器允许其跨域。
