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