zoukankan      html  css  js  c++  java
  • 前端常见的跨域解决方案

    什么是跨域:

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

    广义的跨域:

    资源跳转: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)

    })

  • 相关阅读:
    ES7/ES8 语法学习
    JavaScript中this对象原理简洁说明
    浅谈http协议
    各个浏览器之间常见的兼容性问题
    npm -v 报错:cannot find module 'core-util-is'
    对象遍历的几种方法
    Vue项目如何关闭Eslint检测
    axios 基本运用
    如何去掉vue路由中的#
    vue 父子组件、兄弟组件传值
  • 原文地址:https://www.cnblogs.com/hanli-you/p/8610863.html
Copyright © 2011-2022 走看看