1.跨域请求的含义

由于浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（js）对不同域的服务进行跨站调用。

一般的，只要网站的 协议名(protocol)主机(hosts)端口号(port)这三个中任意一个不同，网站间的数据请求与传输便构成了跨域调用。

例如：服务器3000上的页面向服务器3000发起请求，服务器处理数据以后会将数据返回给客户端；但服务器3000的页面向服务器3001发起请求，则发生了跨域请求的调用。

跨域报错

需要注意的是：跨域请求并非是浏览器限制了发起跨域请求，而是请求可以正常发起，到达服务器端，但是服务器返回的结果会被浏览器拦截。

2.跨域的解决方案

1.jsonp

jsonp是json的一种使用模式，可以解决主流浏览器的跨域数据访问的问题。其原理是根据XMLHttpRequest对象受到同源策略的影响，而<script>标签元素却不受同源策略的影响，可以加载跨域服务器上的脚本，网页可以从其他来源动态产生JSON资料。用JSONP获取的不是JSON数据，而是可以直接运行的javascript语句。

jsonp总结：

只能使用GET 方法发起请求，只是<script>标签自身的限制决定的。

不能很好地发现错误，并进行处理。与AJAX对比，由于不是通过XMLHttpRequest进行传输，所以不能注册sucess,error等事件监听函数。

2.CORS实现跨域

cors(Cross-Origin Resource Sharing)跨域资源共享是一份浏览器技术的规范，提供了web服务从不同域名传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。与jsonp不同，CORS除了get要求方法以外也支持HTTP要求，用CORS可以让网页设计师用一般的XMLHttpRequest，这种方式的错误处理比JSONP要好。另一方面，jsonp 可以在不支持CORS的老旧浏览器运行。现代浏览器都支持CORS。

jsonp与cors比较

1.CORS除了get方法外，也支持其他的HTTP请求方法如put,post

2.CORS可以使用XMLHttpRequest进行传输，所以他的错误处理方式比jsonp好。

3.jsonp可以在不支持CORS的老旧浏览器上运行。

3.window.name

window对象有个name属性，该属性有个特征：在一个窗口（window）的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而重置。

4.window.postMessage()

这个方法是HTML5的一个新特性，可以用来向其他所有的window对像发送消息。需要注意的是我们必须要保证所有的脚本执行完才能发送MessageEvent,如果在函数执行的过程中条用了他，就会让后面的函数超时无法执行。

教程原址：前端教程 https://mp.weixin.qq.com