跨域的几种解决方式

什么是跨域？

页面向一个与当前域名不同的页面或服务器发送请求的行为。

什么叫域名不同？

两个url的协议、域名或者端口有一个或多个不同就叫域名不同。

跨域会导致什么问题？

浏览器出于安全角度默认会阻止这种行为。

如何解决？

1. JSONP

利用<script>标签可以请求跨域文件的特性，在需要发送请求的时候生成一个新的<script>标签，然后令其src属性为一个指定的js文件并且将参数作为url的参数。

var newScript = document.createElement("script");
var url = 'http://www.example.com/?index=0&length=5';
newScript.src = url;
newScript.id = 'temp';
document.body.appendChild(newScript); //插入script后会自动发送请求
document.querySelector('script#temp').remove(); //删除script节点

// 请求返回后被调用的方法
function showNews(data){
/*
    处理代码
*/
}

当服务器的js文件接收到请求时，可以根据url中的参数来确定返回的数据，并且返回一个方法的调用（这个方法已经在前端页面声明过），方法的参数就是要返回的数据。

服务器端返回方法的调用

页面在<script>标签加载完成后会自动执行返回的方法。
这样就实现了跨域请求数据。

2. CORS

当一个服务器想要接受某个其他域的请求时，可以在响应头的Access-Control-Allow-Origin属性中添加允许请求的url。

Access-Control-Allow-Origin: https://www.example.com

当页面请求一个跨域请求并且成功返回数据以后，浏览器会比较这次请求的请求头的origin属性是否存在于响应头的Access-Control-Allow-Origin里面，如果存在就会显示请求结果，如果不存在就会报跨域错误。

3.降域

将两个根域名相同的页面或者iframe的document.domain设置为他们的根域名，之后它们之间可以发送ajax请求。

4.window.postMessage()

通过这个方法可以实现两个不同域名的页面之间通信，接受方可以监听window.message事件，并且通过判断origin来确定请求来源的合法性。