• 前端常见的跨域解决方案


    什么是跨域:

    一个域名下的文档或者脚本试图请求另外一个域名的下的资源

    广义的跨域:

    资源跳转:a链接、重定向、表单提交

    资源嵌入:<link> <script>  <img>等dom标签

    脚本请求:js发起的ajax请求,dom和js的跨域操作

    其实就是浏览器的同源策略导限制的一类请求场景

    什么是同源策略:

    他是浏览器最核心的安全功能,所谓的同源策略就是:协议+域名+端口,三者相同,即便两个相同的不同的域名指向相同的ip,也非同源

    同源测略限制了以下几种行为:

    cookie、localSotorage无法读取

    Dom和js对象无法获得

    ajax请求不能发送

    常见的跨域场景

    跨域解决方案:

    1、 通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享(CORS)
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域

    一、通过jsonp跨域

    为了减轻web服务器的负载,我们把js、css、img等静态资源分离到一台独立的域名的服务器上,在html特免中在通过相应的标签从不同的域名下加载静态资源,而被浏览器允许,基于此原理。我们可以通过动态创建script。再请求一个带有网址的实现跨域通讯。

    1)原生实现

    <script>

        var script=document.creatElement('script');

        script.type='text/javascript';

       //传参并指定回调执行函数为onback

       script.src='

    http://www.domain2.com:8080/login?user=admin&callback=onBack'

    document.head.appendChild(script);

    //回调执行函数

    function onback(res){

        console.log(JSON.stringify(res));

    }

    </script>

    服务器返回如下(返回时就执行全局函数)

    onback({‘status’:true,'user':'adimin'})

    2)jquery   ajax

    $.ajax({

       url:'

    http://www.domain2.com:8080/login

    ',

       type:'get',

       dataType:'jsonp',        //请求方式为jsonp

       jsonpCallback:"onback"    //自定义回调函数名

       data:{}

    })

    3)vue

       this.$http.jsonp('

    http://www.domain2.com:8080/login

    ',{

       params:{},

       jsonp:'onback'

    }).then((res)=>{

        console.log(res)

    })

  • 相关阅读:
    SQL Server创建复合索引时,复合索引列顺序对查询的性能影响
    SQL 查询性能优化----解决书签查找
    从源码分析 Spring 基于注解的事务
    jQuery最佳实践(不断更新中...)
    Java 8 LongAdders:管理并发计数器的正确方式
    Java中的显示锁 ReentrantLock 和 ReentrantReadWriteLock
    在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
    颠覆式前端UI开发框架:React
    Whitecoin区块链钱包高级功能使用命令
    消息队列使用的四种场景介绍
  • 原文地址:https://www.cnblogs.com/hanli-you/p/8610863.html
Copyright © 2020-2023  润新知