精华内容
下载资源
问答
  • 涉及面试题:什么是跨域?为什么浏览器要使用同源策略?你有几种方式可以解决跨域问题?了解预检请求嘛? 同源策略限制以下几种行为: 1.) Cookie、LocalStorage IndexDB 无法读取 2.) DOM Js对象无法获得 3...

    19.1 跨域

    涉及面试题:什么是跨域?为什么浏览器要使用同源策略?你有几种方式可以解决跨域问题?了解预检请求嘛?

    • 因为浏览器出于安全考虑,有同源策略/SOP(Same origin policy)。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。
    • 那么是出于什么安全考虑才会引入这种机制呢? 其实主要是用来防止 CSRF(跨站请求伪造)攻击的。简单点说,CSRF 攻击是利用用户的登录态发起恶意请求。
    • 也就是说,没有同源策略的情况下,A 网站可以被任意其他来源的 Ajax 访问到内容。如果你当前 A 网站还存在登录态,那么对方就可以通过 Ajax 获得你的任何信息。当然跨域并不能完全阻止 CSRF

    然后我们来考虑一个问题,请求跨域了,那么请求到底发出去没有? 请求必然是发出去了,但是浏览器拦截了响应。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax就不会。因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。
    同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。

    19.2 如何解决跨域问题

    跨域解决方案
    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即可,
    • 复杂的CORS
    • 窗口之间Js跨域postMessage
    • 开发环境下接口跨域用nginx反向代理或node中间件比较方便。

    1. JSONP

    JSONP 的原理很简单,就是利用 <script> 标签没有跨域限制的漏洞。
    通过 <script>标签指向一个需要访问的地址并提供一个回调函数来接收数据

    <script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
    <script>
        function jsonp(data) {
        	console.log(data)
    	}
    </script>    
    

    JSONP 使用简单且兼容性不错,但是只限于 get 请求

    在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的,这时候就需要自己封装一个 JSONP,以下是简单实现

    function jsonp(url, jsonpCallback, success) {
      let script = document.createElement('script')
      script.src = url
      script.async = true
      script.type = 'text/javascript'
      window[jsonpCallback] = function(data) {
        success && success(data)
      }
      document.body.appendChild(script)
    }
    jsonp('http://xxx', 'callback', function(value) {
      console.log(value)
    })
    
    //原生实现
     <script>
      var script = document.createElement('script');
      script.type = 'text/javascript';
    
      // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
      script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
      document.head.appendChild(script);
    
      // 回调执行函数
      function handleCallback(res) {
        alert(JSON.stringify(res));
      }
     </script>
    
    //Vue.js实现
    this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'handleCallback'
    }).then((res) => {
        console.log(res); 
    })
    

    实现原理:

    • Step1: 创建 callback 方法
    • Step2: 插入 script 标签
    • Step3: 后台接受到请求,解析前端传过去的 callback 方法,返回该方法的调用,并且数据作为参数传入该方法
    • Step4: 前端执行服务端返回的方法调用
    // index.html
    function jsonp({ url, params, callback }) {
      return new Promise((resolve, reject) => {
      	//创建script标签
        let script = document.createElement('script')
        //将回调函数挂载在 window 上
        window[callback] = function(data) {
          resolve(data)
          //代码执行后,删除插入的 script 标签
          document.body.removeChild(script)
        }
        //将回调函数加在请求地址上
        params = { ...params, callback } // wd=b&callback=show
        let arrs = []
        for (let key in params) {
          arrs.push(`${key}=${params[key]}`)
        }
        script.src = `${url}?${arrs.join('&')}`
        document.body.appendChild(script)
      })
    }
    jsonp({
      url: 'http://localhost:3000/say',
      params: { wd: 'Iloveyou' },
      callback: 'show'
    }).then(data => {
      console.log(data)
    })
    
    // server.js
    let express = require('express')
    let app = express()
    app.get('/say', function(req, res) {
      let { wd, callback } = req.query  //获取传来的callback函数名,callback是key
      console.log(wd) // Iloveyou
      console.log(callback) // show
      res.send(`${callback}('我不爱你')`)
    })
    app.listen(3000)
    
    

    上面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=show这个地址请求数据,然后后台返回show(‘我不爱你’),最后会运行show()这个函数,打印出’我不爱你’

    2. 跨域资源共享(CORS)

    • 跨域资源共享 CORS 详解
    • CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。
    • 浏览器会自动进行 CORS 通信,实现 CORS 通信的关键是后端。只要后端实现了 CORS,就实现了跨域。
    • 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。 虽然设置 CORS和前端没什么关系,但是通过这种方式解决跨域问题的话,会在发送请求时出现两种情况,分别为简单请求和复杂请求。

    简单请求

    不会触发CORS预检的请求称为简单请求,满足以下所有条件的才会被视为简单请求,基本上我们日常开发只会关注前面两点

    Ajax 为例,当满足以下条件时,会触发简单请求

    1. 请求方法是下列之一:
    • GET
    • HEAD
    • POST
    1. 只使用了如下的安全首部字段,不得人为设置其他首部字段。
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type 的值仅限于下列三者之一:
      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded
    1. 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器; XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问
    2. 请求中没有使用 ReadableStream 对象

    复杂请求

    对于复杂请求来说,首先会发起一个预检请求,该请求是 option 方法的,通过该请求来知道服务端是否允许跨域请求。

    对于预检请求来说,如果你使用过 Node 来设置 CORS 的话,可能会遇到过这么一个坑。

    以下以 express框架举例

    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*')
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
      res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials'
      )
      next()
    })
    
    • 该请求会验证你的 Authorization 字段,没有的话就会报错。
    • 当前端发起了复杂请求后,你会发现就算你代码是正确的,返回结果也永远是报错的。因为预检请求也会进入回调中,也会触发 next 方法,因为预检请求并不包含 Authorization 字段,所以服务端会报错。

    想解决这个问题很简单,只需要在回调中过滤 option 方法即可

    res.statusCode = 204
    res.setHeader('Content-Length', '0')
    res.end()
    

    19.2 预检请求

    除了简单请求之外都是非简单请求
    非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

    • 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
    • 浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

    需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响

    下面的请求会触发预检请求,其实非简单请求之外的就会触发预检,就不用记那么多了

    • 使用了PUTDELETECONNECTOPTIONSTRACEPATCH方法
      人为设置了非规定内的其他首部字段,参考上面简单请求的安全字段集合,还要特别注意Content-Type的类型
    • XMLHttpRequestUpload 对象注册了任何事件监听器
    • 请求中使用了ReadableStream对象

    以下是一个发起预检请求的例子
    发起请求的origin与请求的服务器的host不同,而且根据上面的条件判断,触发了预检

    在这里插入图片描述
    在这里插入图片描述
    完整请求流程
    在这里插入图片描述

    3. document.domain

    • 该方式只能用于主域名相同的情况下,比如 a.test.comb.test.com 适用于该方式
    • 实现原理:
      两个页面都通过Js强制设置document.domain为基础主域,就实现了同域。
    • 只需要给页面添加 document.domain = 'test.com' 表示主域名都相同就可以实现跨域

    1.)父窗口:(http://www.domain.com/a.html)

    <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
    <script>
      document.domain = 'domain.com';
      var user = 'admin';
    </script>
    

    2.)子窗口:(http://child.domain.com/b.html)

    <script>
      document.domain = 'domain.com';
      // 获取父窗口中变量
      alert('get js data from parent ---> ' + window.parent.user);
    </script>
    

    4. postMessage

    postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
    a.) 页面和其打开的新窗口的数据传递
    b.) 多窗口之间消息传递
    c.) 页面与嵌套的iframe消息传递
    d.) 上面三个场景的跨域数据传递

    这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息,另一个页面判断来源并接收消息

    用法:postMessage(data,origin)方法接受两个参数

    • data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
    • origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

    简单实现

    // 发送消息端
    window.parent.postMessage('message', 'http://test.com')
    // 接收消息端
    var mc = new MessageChannel()
    mc.addEventListener('message', event => {
      var origin = event.origin || event.originalEvent.origin
      if (origin === 'http://test.com') {
        console.log('验证通过')
      }
    })
    

    复杂实现

    1.)a.html:(http://www.domain1.com/a.html)

    <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
    <script>       
        var iframe = document.getElementById('iframe');
        iframe.onload = function() {
            var data = {
                name: 'aym'
            };
            // 向domain2传送跨域数据
            iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
        };
    
        // 接受domain2返回数据
        window.addEventListener('message', function(e) {
            alert('data from domain2 ---> ' + e.data);
        }, false);
    </script>
    

    2.)b.html:(http://www.domain2.com/b.html)

    <script>
        // 接收domain1的数据
        window.addEventListener('message', function(e) {
            alert('data from domain1 ---> ' + e.data);
    
            var data = JSON.parse(e.data);
            if (data) {
                data.number = 16;
    
                // 处理后再发回domain1
                window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
            }
        }, false);
    </script>
    

    参考文章

    前端常见跨域解决方案(全)
    CORS 简单请求+预检请求(彻底理解跨域)
    跨域资源共享 CORS 详解
    九种跨域方式实现原理(完整版)

    图解正向代理、反向代理、透明代理

    展开全文
  • 同源策略可防止JavaScript发起跨域请求。源被定义为URI、主机名端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。 跨域 原因: 浏览器的同源策略导致了跨域 ...

    JavaScript

    同源策略
    同源策略可防止JavaScript发起跨域请求。源被定义为URI、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。

    跨域

    原因:
    浏览器的同源策略导致了跨域
    作用:
    用于隔离潜在恶意文件的重要安全机制
    解决:

    1. jsonp,允许script加载第三方资源;
    2. 配置代理;
    3. cors前后端协作设置响应头部,Access-Control-Allow-Origin等头部信息;
    4. iframe嵌套通讯,postmessage。
    展开全文
  • 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况:网络协议不同,如http协议访问https协议。端口不同,如80端口访问8080端口。域名不同,如...

    1、什么是跨域?

    由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况:

    • 网络协议不同,如http协议访问https协议。
    • 端口不同,如80端口访问8080端口。
    • 域名不同,如qianduanblog.com访问baidu.com。
    • 子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。
    • 域名和域名对应ip,如www.a.com访问20.205.28.90.

    2、跨域请求资源的方法:

    (1)、porxy代理
    定义和用法:proxy代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。
    实现方法:通过nginx代理;
    注意点:1、如果你代理的是https协议的请求,那么你的proxy首先需要信任该证书(尤其是自定义证书)或者忽略证书检查,否则你的请求无法成功。
    (2)、CORS 【Cross-Origin Resource Sharing】
    定义和用法:是现代浏览器支持跨域资源请求的一种最常用的方式。

    使用方法:一般需要后端人员在处理请求数据的时候,添加允许跨域的相关操作。如下:

    res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
    });
    (3)、jsonp
    定义和用法:通过动态插入一个script标签。浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。
    特点:通过情况下,通过动态创建script来读取他域的动态资源,获取的数据一般为json格式。
    实例如下:
    <script>
        function testjsonp(data) {
           console.log(data.name); // 获取返回的结果
        }
    </script>
    <script>
        var _script = document.createElement('script');
        _script.type = "text/javascript";
        _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
        document.head.appendChild(_script);
    </script>
    缺点:
      1、这种方式无法发送post请求(这里)
      2、另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定。

    文章转载:https://www.cnblogs.com/wdlhao/p/8290436.html









    展开全文
  • 部分面试题

    2020-08-24 20:27:11
    同源策略:URL是由端口、协议、域名路径组成,如果两个URL的端口、协议、域名都一致,就表示他们同源 跨域跨域就是端口 、协议、域名三者有任意一个不符合,就是跨域 跨域解决方法:jsonp: 在浏览器中, ...

    splice和slice

    splice()的方法有三种使用方法:删除,插入和替换
    该方法会改变原数组

    1、删除
    splice(参数1,参数2)
    参数1:要删除元素的索引(从0开始)
    参数2:删除的个数(从参数1开始算)

    var arr = [1,2,3,4,5];
            arr.splice(1,2)
            console.log(arr);  //[1,4,5]
    

    splice(参数1,参数2,参数3)
    2.插入:如果参数2为0,那么就为插入 插入到参数1的后面

    var arr = [1,2,3,4,5];
            arr.splice(1,0,8)
            console.log(arr);  【1,8,2,3,4,5】
    

    3.替换:如果参数不为0,那么参数3就插入到删除元素的位置

    var arr = [1,2,3,4,5];
            arr.splice(1,2,8)
            console.log(arr);//[1.8.4.5]
    

    **slice(start, end) **
    start,截取的位置 - 1 ;
    end,所截取最后一个字符的位置。
    该方法会返回一个新数组 不会改变原数组

    可提取字符串的某个部分,并以新的字符串返回被提取的部分。

     var str="Heloo";
            var n=str.slice(1,3); //不包括本身,所以只截取的真实长度为2
            console.log(n); //el
    

    如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类

    生命周期钩子

    8种生命周期钩子

    px em rem

    px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。是固定死的,因为IE无法调整那些使用px作为单位的字体大小,所以页面布局很容易错乱
    Firefox虽然能够调整px,但是96%以上的中国网民使用IE浏览器(或内核)。

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。会继承父级元素的字体大小
    在这里插入图片描述

    闭包

    js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中
    访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包就是用来解决这一需求的,闭包的本质就是在一个函数内部创建另一个函数。

    闭包有3个特性:
    1.函数嵌套函数
    2.函数内部可以引用函数外部的参数和变量
    3.参数和变量不会被垃圾回收机制回收

    函数作为返回值
    a()中的返回值是一个匿名函数,这个函数在a()作用域内部,所以它可以获取a()作用域下变量name的值,将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值
    一般情况下,在函数fn执行完后,就应该连同它里面的变量一同被销毁,但是在这个例子中,匿名函数作为fn的返回值被赋值给了fn1,这时候相当于fn1=function(){var n = 0 ... },并且匿名函数内部引用着fn里的变量num,所以变量num无法被销毁,而变量n是每次被调用时新创建的,所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁,于是乎最后就剩下孤零零的num,于是这里就产生了内存消耗的问题
    例1:写一个for循环,让它按顺序打印出当前循环次数

    for(var i=0;i<5;i++){
                setTimeout(function(){
                    console.log(i+'');
                    
                },2000)
            }
    

    按照预期它应该依次输出1 2 3 4 5,而结果它输出了五次5
    由于js是单线程的,所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行,而在等待过程中for循环就已经在执行,等到setTimeout可以执行的时候,for循环已经结束,i的值也已经编程5,所以打印出来五个5

    for(var i=0;i<5;i++){
               (function(i){
                setTimeout(function(){
                    console.log(i+'');
                },1000)
               }(i))
            }
    

    引入闭包来保存变量i,将setTimeout放入立即执行函数中,将for循环中的循环值i作为参数传递,100毫秒后同时打印出1 2 3 4 5,并没有延迟输出

     for(var i = 0;i<5;i++){
                (function(i){
                    setTimeout(function(){
                        console.log(i);
                    },i*1000)
                })(i)
            }
    

    相当于同时启动3个定时器,i*1000是为4个定时器分别设置了不同的时间,同时启动,但是执行时间不同,每个定时器间隔都是1000毫秒,实现了每隔1000毫秒就执行一次打印的效果。

    例2:点击ul下面的li 弹出相对应的索引

    <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    

    方法1:

    window.onload = function(){
    var lis = document.getElementById("test").children;
    for(var i = 0;i<lis.length;i++){
    lis.onclick = (function(i){
    return function(){
    alert(i);
    }
    })(i)
    }
    }
    

    方法2

    window.onload = function(){
    var lis = document.getElementById("test").children;
    for(var i = 0;i<lis.length;i++){
    (function(i){
    lis[i].onclick = function(){
    alert(1)
    }
    }(i))
    }
    }
    

    闭包的优缺:

    优点:

    1.保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突

    2.在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)

    3.匿名自执行函数可以减少内存消耗

    缺点:

    1.其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

    2.其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响

    展开全文
  • 常见的前端面试题

    2020-04-17 18:11:22
    4 同源策略跨域,解决方案,jsonp跨域原理,实现一个jsonp 5 typeof instanceof,typeof(null)输出什么? 6 forEachmap的区别 7 js数据类型 8 事件循环任务队列 9 flex 10 回流重绘,transform会造成...
  • 面试题

    2021-03-23 23:27:31
    闭包 闭包的定义其实很简单:函数 A 内部有⼀个函数 B ,函数 B 可以访问到 函数 A 中的变量,那么函数 B 就是闭包 闭包存在的意义就是让我们可以间接...浏览器的同源策略(服务端没有同源策略和跨域 img scrpit 能够
  • 如需获取完整版229页PDF面试题,请直接滑到文末。 1. 什么是同源策略同源策略可防止 JavaScript 发起跨域请求。源被定义为协议、主机名端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,...
  • 今天面试的vue面试题

    2019-12-11 16:45:08
    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源(广义),但通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 2、vue什么是同源策略? 所谓同源是指"协议+域名+端口"三者相同。 3、vue的...
  • 金三银四,这会到了招聘的高峰期,最近很多朋友都向我发来了面试题,特此来自我留下笔记分享,希望对大家有帮助,有所提升。什么是跨域?我们经常会看到上边类似的报错,Access-Cotrol-Allow-Origin 这是典型的...
  • 跨域问题是这是浏览器为了安全实施的同源策略导致的,同源策略限制了来自不同源的document、脚本,同源的意思就是两个URL的域名、协议、端口要完全相同。script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域...
  • 一、 同源策略 所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释: 同源策略,它是由Netscape提出的一个著名...而解决这种同源策略的方法称之为跨域 跨域的方法有很多种,这里介绍一下最经典
  • 前端面试题(二)

    2020-07-21 10:36:42
    1、如何减少DOM操作? (1)缓存DOM查询结果:如果脚本需要多次使用...原理:利用src或href属性不受同源策略限制的特点,动态创建script标签,将远程接口赋值给src获取数据,并通过回调函数来接受处理数据,达到跨域
  • 前端常见难点面试题

    2018-11-20 14:54:06
    1.跨域同源策略 同源策略同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。同源:就是协议、域名端口号相同。 • 降域 document.domain 同源策略认为域子域...
  • 同源策略可防止 JavaScript 发起跨域请求。源被定义为 URI、主机名端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型,访问另一个网页上的敏感数据。 同源策略: 协议、主机、端口必须完全一致...
  • 原生JS面试题2

    2020-04-22 11:17:18
    要理解跨域,先要了解一下”同源策略“。所谓同源是指,协议、域名、端口都相同。所谓”同源策略“,简单的说,就是基于安全考虑,当前域不能访问其他域的东西。 http https :协议不同 www.a.com ...
  • 【面试】前端面试题

    2018-03-17 22:40:00
    石墨文档 1.git命令用过哪些 2.css3用过哪些 3.box- sizing 默认值content-box ... border - box 内容的宽高要...浏览器为了安全有一种同源策略,协议.域名.端口有一个不同都是跨域,不允许ajax跨域获取服务器数...
  • web前端面试题

    2018-04-20 13:50:23
    1、跨域请求什么是跨域跨域是由浏览器的同源策略引起的,是指页面请求的...跨域请求的方式:(1) JsonP:(2) 在服务器端设置同源策略地址,在响应头上添加2、BOMDOM分别是指什么?3、一个完整的URL地址包括哪些内...
  • 前端面试题 及 答案

    2021-01-12 19:15:43
    前端面试题目录1、link@import的区别2、如何理解js中的原型链3.怎么理解js中的内存泄露4、跨域问题5、vuex:Vue.js应用程序的状态管理模式+库。6、vue的生命周期7、jsonxml数据的区别8、httphttps的区别9,...
  • 前端面试题整理

    2019-02-01 14:30:00
    1.比较typeof与instanceof? typeof的定义用法:返回值是一个字符串,...由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况。 跨域请求资源的方...
  • vue 经典面试题 

    2020-10-26 12:55:46
    vue常见面试题 9.14 上午 1.同源策略 端口(如果有指定)域名都相同,则两个页面具有相同的源。 2.nodejs 解决跨域问题 cors app.all 3.typeof 查看数据类型 4instanceOf 用于测试构造函数的prototype属性,...
  • 浏览器相关面试题

    2021-02-09 17:22:52
    跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限 制,防止他人恶意攻击网站 比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实...
  • 解释一下同源策略 同源策略,那些东西是同源可以获取到的 如果子域名顶级域名不同源,在哪里可以设置叫他们同源 如何设置可以跨域请求数据?jsonp是做什么的? Ajax Ajax是否遵循同源策略? json注入如何...
  • 前端简单面试题 (万科物流) 2018-11-08 1.自我介绍 2.你们做的系统是h5的吗 3.你vue在哪个项目上做的,有哪些...9.对于浏览器同源策略是否了解,对于jsonp跨域的原理 10.ajax平时怎么用 11.浏览器调试用什么 12...
  • 前端最新面试题

    2016-10-24 20:26:00
    跨域请求存在的原因:由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容。 跨域的场景: 1.域名不同www.yangwei.com www.wuyu.com 即为不同的域名) 2.二级域名相同,子域名不同...
  • 7、请解释一下 JavaScript 的同源策略。 8、GET POST 的区别,何时使用 POST? 9、ajax是什么?ajax的交互模型?同步异步的区别?如何解决跨域问题? 10、 Ajax 的最大的特点是什么。 11、ajax 的缺点 12、ajax ...
  • 社招中级前端笔试面试题总结

    千次阅读 2018-05-14 12:16:23
    题目考察频率指相关问题的考察频率,并非只是提到的点。JavaScript基础1、声明提升类问题 (考察频率:高)变量声明函数声明都会提升,但函数会提升到变量前。...(考察频率:高)同源策略是浏览...
  • 24.getpost区别 请求方式 GET POST 参数位置 参数拼接到url的后面 参数在请求体中 ...由于浏览器的同源策略限制,不允许跨域请求;但是页面中的 script、img、iframe标签是例外,不受同源策略限制。

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

同源策略和跨域面试题