常用前端面试问题

跨域方法

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属性，使其进行跨域
我所理解的就是直接绕过了服务器，那何来同源限制

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

常用前端面试问题