由于现在web前后端分离的原因,造成了前端开发中一定会遇到跨域的问题,在这里我总结下几种主流的跨域方式,iframe, window.name, window.domain 从来就没去用过,就不谈了。
首先什么是跨域?
跨域来源于同源策略。所谓同源策略是一种保障安全的策略,即 协议、主机名、端口,只要其中任一一种不同且在没有服务器明显授权的情况下那么就不能通过js去获取到数据。
跨域的主要方式:
一 jsonp方式:
所谓的jsonp其实是利用网页中<script>可以随意引用不受同源策略的限制。他实际上返回的是一个函数,函数的参数即所需数据(即json with padding)。和普通的ajax有三点不同之处,1:只能用get方式, 2:需要改变dataType为jsonp, 3:需要约定好回调函数,三者缺一不可。这样服务器在响应的时候就把数据放在回调函数之类返回,而客户端接收到数据后就调用回调函数对数据进行相应的操作。
缺点:只能用来获取数据。
二 cors方式:
cross origin resourse sharing 跨域资源共享,他是W3C推荐的一种跨域的访问验证的机制,得到了现代主流浏览器均支持,浏览器把请求分为简单请求和复杂请求两类:
简单请求:
请求方法为:get post head 中的一种。
复杂请求:
常见的有:
put,delete方法 或 发送json格式的ajax请求,自定义头部的ajax请求
复杂请求时,浏览器会想发送一条预检信息(这样比较影响效率,我们可以在服务器添加Access-Control-Allow-MaxAge来避免)
请求中带有cookie时还需要加上 "Accesse-Control-Allow-Credential", "true" 才能进行跨域
三 反向代理方式:
可以自己搭建一个服务器,服务器获取请求后修改请求域名后再向目标服务器发送请求,获取数据后返回。因为是本域请求所以绕过了同源的限制。
还可以通过在被调用方设置代理转发的方式~~~~~