前端面试宝典

最新推荐文章于 2022-12-28 14:47:22 发布

axl1870827

最新推荐文章于 2022-12-28 14:47:22 发布

阅读量103

点赞数

文章标签：面试前端 java

本文链接：https://blog.csdn.net/axl1870827/article/details/124851461

版权

写在前面

CSDN话题挑战赛第1期

活动详情地址：CSDN
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

携手共筑前端面试宝典

题目一

题目一

前端面试题

考点

什么是跨域？跨域请求资源的方法有哪些？你觉得哪种方法比较好？为什么？

答案

什么是跨域？跨域请求资源的方法有哪些？你觉得哪种方法比较好？为什么？

　　　　（1）什么是跨域？

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

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

　　　　（2）跨域请求资源的方法

1.proxy代理　　

　　　　　　　　定义和用法：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的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

4.xdr

这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。看一下微软自己的例子就行

<!DOCTYPE html>

<html>

<body>

<h2>XDomainRequest</h2>

<input type="text" id="tbURL" value="http://www.contoso.com/xdr.txt" style=" 300px"><br>

<input type="text" id="tbTO" value="10000"><br>

<input type="button" onclick="mytest()" value="Get">

<input type="button" onclick="stopdata()" value="Stop">

<input type="button" onclick="readdata()" value="Read">

<br>

<div id="dResponse"></div>

<script>

var xdr;

function readdata()

{

var dRes = document.getElementById('dResponse');

dRes.innerText = xdr.responseText;

alert("Content-type: " + xdr.contentType);

alert("Length: " + xdr.responseText.length);

}

function err()

{

alert("XDR onerror");

}

function timeo()

{

alert("XDR ontimeout");

}

function loadd()

{

alert("XDR onload");

alert("Got: " + xdr.responseText);

}

function progres()

{

alert("XDR onprogress");

alert("Got: " + xdr.responseText);

}

function stopdata()

{

xdr.abort();

}

function mytest()

{

var url = document.getElementById('tbURL');

var timeout = document.getElementById('tbTO');

if (window.XDomainRequest)

{

xdr = new XDomainRequest();

if (xdr)

{

xdr.onerror = err;

xdr.ontimeout = timeo;

xdr.onprogress = progres;

xdr.onload = loadd;

xdr.timeout = tbTO.value;

xdr.open("get", tbURL.value);

xdr.send();

}

else

{

alert("Failed to create");

}

else

{

alert("XDR doesn't exist");

}

</script>

</body>

</html>

5.document.domain解决iframe跨域

　　此方案适用的范围比较小，只能解决主域相同，子域不同的跨域数据传输。

6.window.name解决iframe跨域　　

　　除了利用domain的特性外，还可以利用一个特殊的属性： window.name同一个iframe在打开不同的页面后，甚至不同域名的页面后，window.name是保持不变的，并且大小支持2M的长度。

7.location.hash解决iframe跨域

8.postMessage解决iframe跨域

9.WebSocket协议跨域

　　WebSocket是HTML5支持的一种新协议，它支持客户端与服务端的双向通信，并且允许跨域通信。通过WebSocket来进行双向通信，其天生允许跨域的特性能解决特定场景下的跨域问题。同样在使用它之前，考虑好设备兼容。

（3）哪种方法较好？

　　目前我也不知道。

扩展

暂无

写在最后

CSDN话题挑战赛第1期

活动详情地址：CSDN

axl1870827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试宝典

写在前面CSDN话题挑战赛第1期活动详情地址：CSDN 参赛话题：前端面试宝典话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！总之我们大家一起将自己的面试经验以及学
复制链接

扫一扫