了解跨域以及跨域的解决方案

什么是跨域

• 跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，在服务端之间是不存在跨域的。
• 所谓同源指的是两个页面具有相同的协议、域名和端口，三者有任一不相同即会产生跨域。
• 这里有很多人以为产生跨域的时候，连请求都没有发出去，这样理解是错误的，请求已经发出去了，服务器也把数据返回回去了，只不过浏览器没有给我们罢了，这个一定要记住

为什么要有跨域（安全机制）

• 浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略
• 举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。
• 在同源策略下，会有以下限制：
  无法获取非同源的 Cookie、LocalStorage、SessionStorage 等
  无法获取非同源的 dom
  无法向非同源的服务器发送 ajax 请求

解决跨域的方法

• 在浏览器中，< script >、< img >、< iframe >、< link >等标签都可以加载跨域资源，而不受同源限制

通过jsonp跨域

• jsonp本质上是使用script的方式来解决跨域，通过< script >标签的src属性,请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。虽然浏览器限制了页面直接向非同源的服务器发送ajax请求，但是并没有限制页面向非同源的服务器请求JS脚本，就像我们可以使用img标签请求任意域上图片一样。
• 当使用jsonp方式来实现跨域请求时，需要服务端进行配合。因为一般使用ajax请求从服务端返回的数据都是json对象，但是我们需要的是JS脚本，这就需要服务端将返回的数据形式变成JS脚本形式，JSONP只支持GET数据请求，不支持POST请求

注意事项：JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象。

• jsonp方式缺点：
  （1）jsonp需要服务端配合修改，如果调用的接口不是我们自己的服务器上，jsonp就无能无力了.
  （2）jsonp只能发送get请求
  （3）jsonp发送的是script请求，并不是xhr请求，因此xhr的很多优势都不能使用（例如：异步，事件等）

使用代理解决跨域

代理服务器与浏览器同源，不存在跨域问题，代理服务器与服务器非同源，但是服务器与服务器之间采用 http 请求，不存在跨域问题，所以可以利用代理服务器进行转发解决跨域

使用cors解决跨域

• CORS全称是"跨域资源共享"（Cross-origin resource sharing),CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能
• CORS支持所有类型的HTTP请求
• 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
• CORS跨域的原理实际上是浏览器与服务器通过一些 HTTP 协议头来做一些约定和限制

参考文章：造成跨域的原因和解决方法
参考文章：跨域的产生原因及解决方案
参考文章：JSONP解决跨域问题
参考文章：一文弄懂 CORS 跨域(前端+后端代码实例讲解)
参考文章：跨域（CORS）产生原因分析与解决方案，这一次彻底搞懂它