- CORS: 使用自定义的HTTP头部让浏览器与服务器进行沟通,通过XMLHttpRequest对象实现对CORS的支持。
Origin:https://www.baidu.com
如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin中回发相同的源信息(如果是公共资源,可以发回“*”)
例如:Access-Control-Allow-Origin:https://www.baidu.com
请求后,将按照时间缓存起来。第一次进行请求发送时,会多一次http请求,以下分别是后端代码:Origin:https://www.baidu.com Access-Control-Request-Method: Post //自身请求使用方法 Access-Control-Request-Header:NCZ //自定义头部信息,多个,号分割 Access-Control-Allow-Origin: https://www.baidu.com Access-Control-Allow-Method:Post //可以是多个 逗号隔开 Access Control Allow Headers:允许的头部,多个逗号隔开 Access-Control-Allow-Max-Age: 应该将这个Prefight请求缓存多长时间(秒) 还有一个: Access-Control-Allow-Credentials:true //服务器接受带凭据的请求
@Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错 response.setHeader("Access-Control-Allow-Credentials","true"); response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间 response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization"); response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1. response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0"); filterChain.doFilter(servletRequest, servletResponse); }
- imgage图像Ping,只能get请求,用于浏览器与服务器之间的单向连接
var img = new Image() img.onload = img.onerror = function(){ alert('连接结束') } src=“www.baidu.com/login?name='123'”
-
JSONP模式
JSONP将访问跨域请求变成了执行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为传入参数[qrg]的函数[hh]执行代码function hh(qrg){ console.log(qrg) } var script = document.createElement('script') script.src="https://mp.csdn.net/editor/html/109660640?callback=hh" document.body.insertBefore(script, document.body.firstChild)
注:1安全问题,2用计时器来查看是否有返回,不能实时监听
-
Comet更高级的服务器推送,Ajax的升级版,实现方式为长轮询/流
-
Comet的SSE服务器发送事件,SSE通过常规http通信
-
Comet的WebSecket
WebSecket是一种与服务器进行双全工/双向通信协议,拥有自定义协议/发送状态/open,error,close事件
-
PostMessage
-
nodejs中间件代理webpack.config.js devServer.proxy
-
location.hash / window.name / document.domain + iframe的src
以上总结自:javascript字典手册page582