一、为什么会产生前端跨域?
1.对于安全性的思考
前端的安全性一直是一个值得考虑的问题,在面对前端安全问题,诸如防止跨站脚本攻击这一方式(使用客户端的脚本,对于不同域下的服务进行跨站调用)。针对这个问题,互联网早期探索者Netscape提出了一个著名的安全策略——同源策略:浏览器限制脚本中发起的跨站请求,要求JavaScript或cookie只能访问同源的资源。这里的同源指的是,域名,协议名,以及端口号相同。正是由于这个机制,才致使我们无法用简单的手段来请求不同域名下的资源。
二、如何解决跨域?
1. JSONP
JSONP是一个非官方协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。 基本思想:网页通过添加一个"; document.getElementsByTagName("head")[0].appendChild(JSONP);
2. window.name
window.name+iframe需要目标服务器响应window.name,window对象有一个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window. name都有读写的权利,window.name 是持久存在一个窗口载入过的所有页面中的!
3. window.postMessage
HTML5引入了一个全新的API:跨文档消息传输Cross Document Messaging 。它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用) web sockets原理:在JS创建了web sockets之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockets协议。 otherWindow.postMessage(message, targetOrigin) otherWindow:指目标窗口,也就是给哪个窗口发消息,是window.frames属性的成员或者由window.open方法创建的窗口。 参数说明: (1)message:是要发送的消息,类型为string,object (2)targetOrigin:是限定消息接收范围,不限制使用“ * ”
4. CORS
基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
5. web sockets
web sockets是浏览器的一种API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用) web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。