美文网首页
常用前端面试问题

常用前端面试问题

作者: 奔走的沙随风而动 | 来源:发表于2019-08-04 19:24 被阅读0次

    跨域方法

    Jsonp:

    采用非同源限制标签进行处理请求,我理解的jsonp => json - page
    一个json页面
    但是它只能处理get的请求,不适用于RESTful 原则
    但是它兼容低版本浏览器,
    将返回的数据作为指定的回调函数的参数,script标签引入的函数是属于window全局的,所以你只需要在另一个script中指定回调函数,这样就可以获取到服务端数据了

    <script>
      function test(data) {
        console.log(data);
        return data;
      }
    </script>
    <script
      type="text/javascript"
      src="http://127.0.0.1:8090/v1/system/user/getTotal?callback=test"
    ></script>
    

    cors:

    后端服务器直接配置,前端请求会自动添加字段origin(/ˈôrəjən/)


    当然这里的字段值可以是指定的url,相当于添加一个白名单

    res.header('Access-Control-Allow-Origin', '*')
    

    但是这些只能处理简单请求
    只要头部信息只有下面这些,并且只有这三种方法的都是简单请求

    (1) 请求方法:
         HEAD
         GET
         POST
    (2)HTTP的头信息:
         Accept
         Accept-Language
         Content-Language
         Last-Event-ID
         Content-Type:
             application/x-www-form-urlencoded、 multipart/form-data、text/plain
    
    

    说白了就是,自定义字段,非这三种请求的都会触发复杂请求(就是会触发OPTIONS方法和服务器验证),通过验证才会正式请求服务器。
    所以一般还需要设置,可允许更改头部字段以及内容字段

        res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type') // 这个里面需要添加前端发送请求里面添加的自定义字段才行
        res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS')
    

    proxy:

    webpack里面可以设置devServer proxy属性,使其进行跨域
    我所理解的就是直接绕过了服务器,那何来同源限制

    相关文章

      网友评论

          本文标题:常用前端面试问题

          本文链接:https://www.haomeiwen.com/subject/ijuydctx.html