前端如何解决跨域中的问题

??在前端如何解决跨域领域中跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制

??同源策略是一种约定,由Netscape公司1995年引入浏览器它是浏覽器最核心也最基本的安全功能,如果缺少了同源策略浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同即便两个不哃的域名指向同一个ip地址,也非同源

??同源策略限制以下几种行为:

  • DOM和JS对象无法获得
  • AJAX 请求不能发送

??jsonp的原理就是利用<script>标签没有跨域限制,通过<script>标签src属性发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中返回给浏览器,浏览器解析执行从而前端如何解决跨域拿到callback函数返回的数据。

', // 允许访问的域(协议+域名+端口) * 但只要domain2中写入一次cookie认证后面的跨域接口都能从domain2中获取cookie,从而实现所有的接口嘟能跨域访问

4、nodejs中间件代理跨域

??node中间件实现跨域代理原理大致与nginx相同,都是通过启一个代理服务器实现数据的转发,也可以通过設置cookieDomainRewrite参数修改响应头中cookie中域名实现当前域的cookie写入,方便接口登录认证

// 前端如何解决跨域开关:浏览器是否读写cookie // 修改响应头信息,实现跨域并允许带cookie
// 获取父窗口中变量

??WebSocket protocol是HTML5一种新的协议它实现了浏览器与服务器全双工通信,同时允许跨域通讯是server push技术的一种很好的实現。

??以上就是9种常见的跨域解决方案jsonp(只支持get请求,支持老的IE浏览器)适合加载不同域名的js、cssimg等静态资源;CORS(支持所有类型的HTTP请求,但浏览器IE10以下不支持)适合做ajax各种跨域请求;Nginx代理跨域和nodejs中间件跨域原理都相似都是搭建一个服务器,直接在服务器端请求HTTP接口這适合前后端分离的前端如何解决跨域项目调后端接口。document.domain+iframe适合主域名相同子域名不同的跨域请求。postMessage、websocket都是HTML5新特性兼容性不是很好,只適用于主流浏览器和IE10+

??这么多的跨域方案,没有最好只有最合适的,根据具体的使用场景选择跨域方案希望这篇博文能带给大家┅点帮助~~

设置后台的cors允许跨域指定ip或通過*允许全部

通过jsonp。利用浏览器对script加载完自动执行特性

通过nginx反向代理

我要回帖

更多关于 前端如何解决跨域 的文章

 

随机推荐