zoukankan      html  css  js  c++  java
  • 前端的跨域请求方法使用场景及各自的局限性

    第一篇原创博客。

    最近一值在学习跨域请求的方式,由于都没有在实际的项目中使用过,但在一些面试中又会一直被问到,每次都答的不全,而且答不出各自的使用限制,并不是真正的理解了如何跨域,最近一直在找网上查找这些资料,将自己学习的整理出(没有具体的例子)加深一下理解,如有错误欢迎大家指正,也欢迎补充(好像也没人会看我的博客耶,哈哈,)。

    跨域请求存在的原因:由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容。

    跨域的场景:     1.域名不同             (www.yangwei.com 和www.wuyu.com 即为不同的域名)

                           2.二级域名相同,子域名不同    (www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不同)

                           3.端口不同,协议不同  ( http://www.yangwei.com 和https://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)

    跨域的方式:

    1.前端的方式: possMessage,window.name,document.domain,image.src(得不到数据返回),jsonP(script.src后台不配合得不到数据返回),style.href(得不到数据返回)

    一.imge.src,script.src,style.href 不受同源策略的影响可以加载其他域的资源,可以用这个特性,向服务器发送数据。最常用的就是使用image.src 向服务器发送前端的错误信息。image.src 和style.href 是无法获取服务器的数据返回的,script.src 服务器端配合可以得到数据返回。

    二possMessage,window.name,document.domain 是两个窗口直接相互传递数据。

    (1)possMessage 是HTML5中新增的,使用限制是 必须获得窗口的window 引用。IE8+支持,firefox,chrome,safair,opera支持

     (2)window.name ,在一个页面中打开另一个页面时,window.name 是共享的,所以可以通过window.name 来传递数据,window.name的限制大小是2M,这个所有浏览  器都支持,且没有什么限制。

    (3) document.domain 将两个页面的document.domain 设置成相同,document.domain 只能设置成父级域名,既可以访问,使用限制:这顶级域名必须相同

    2.纯后端方式: CORS,服务器代理

    CORS 是w3c标准的方式,通过在web服务器端设置:响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据,ie8&9(XDomainRequest),10+,chrom4 ,firefox3.5,safair4,opera12支持这种方式。

    服务器代理,同源策略只存在浏览器端,通过服务器转发请求可以达到跨域请求的目的,劣势:增加服务器的负担,且访问速度慢。

    3.前后端结合:JsonP

    script.src 不受同源策略的限制,所以可以动态的创建script标签,将要请求数据的域写在src 中参数中附带回调的方法,服务器端返回回调函数的字符串,并带参数。

    如 script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback,服务器端返回 getInfoCallBack("name:yangwei;age:18") 这段代码会直接执行,在前面定义好getInfoCallBack函数,既可以获得数据并解析。 这种是最长见的方式。

    4.websocke

    2跨域请求发送cookie,如果后端配置了 Access-Control-Allow-Origin:* 默认发起ajax跨域请求时,浏览器是不会携带cookie的,如果设置xhr.withCredentials=true,既可以携带cookie, 但是后台配置的Access-Control-Allow-Origin 不能为*,要为具体的域名.

    在axios中设置withCredentials=true

  • 相关阅读:
    Qt快速入门学习笔记(基础篇)
    IDEA 创建文件夹总默认根节点问题解决
    SpringBoot 集成MyBatis 中的@MapperScan注解
    Springboot项目下mybatis报错:Invalid bound statement (not found)
    IDEA maven项目查自动查看依赖关系,解决包冲突问题
    Mybatis-generator/通用Mapper/Mybatis-Plus对比
    Mybatis
    在一个已经使用mybatis的项目里引入mybatis-plus,结果不能共存
    springboot整合图像数据库Neo4j
    Spring Boot:Boot2.0版本整合Neo4j
  • 原文地址:https://www.cnblogs.com/chillaxyw/p/5492763.html
Copyright © 2011-2022 走看看