前端面试问题 —— 网络

最新推荐文章于 2022-10-24 21:15:08 发布

一条大河全靠浪

最新推荐文章于 2022-10-24 21:15:08 发布

阅读量446

点赞数

分类专栏：前端面试文章标签：前端面试网络

本文链接：https://blog.csdn.net/HYeeee/article/details/100973032

版权

前端面试专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1、什么是同源策略，解决跨域？CORS 过程中的字段，整个过程说一下。

同源策略

同源：域名、端口、协议都一样

当端口、协议、域名（即使与域名对应的ip）等任意一个不同，就构成跨域。

http://www.servicea.com/first.do
http://10.28.10.13/first.do
域名和其对应的ip，这也是跨域

解决跨域

JSONP ：

动态添加<script>标签来调用服务器提供的js脚本（服务端接口）。
因为src不受同源策略的约束
var sc = document.createElement("script");
sc.src = "http://localhost:8888/mybatis/ScriptServlet?name=script&callback=testscript";
document.body.insertBefore(sc,document.body.firstChild);


缺点：
1、只能发get请求，不支持post方式
2、JSONP是一种脚本注入，存在一定的安全隐患。

CORS

  优势：
  （1）在服务端进行控制是否允许跨域，可自定义规则；
  （2）支持各种请求方式；
  缺点： 会产生额外的请求；

nginx反向代理

思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式；
缺点：需要在nginx进行额外配置，语义不清晰。

CORS

https://blog.csdn.net/nainaiqiuwencun/article/details/83003168

CORS主要是服务器端配置、服务器流程如下：

首先判断请求http头部是否有Origin、Origin是否有效（无效返回403），有效则看method是否有效（无效则返回403），有效则查看是否是OPTION请求，不是则简单请求处理，是则预检处理。

简单请求处理：返回Allow-Origin, Allow-Credentials等，并返回正常内容

预检处理：返回Allow-Origin, Allow-Credentials等，内容为空，只有当浏览器下一次发出实际http请求才返回内容。发了两个请求，第二次就是get/post这种正常请求

1、预检请求：
OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

2、返回
Access-Control-Allow-Origin: http://manage.wzy.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
max-age是本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检。

https://blog.csdn.net/u013089490/article/details/83781384

注意：如果跨域请求要想操作cookie，需要满足3个条件：

服务的响应头中需要携带Access-Control-Allow-Credentials并且为true；
浏览器发起ajax需要指定withCredentials 为true；
响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名。

其他的跨域方式：

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

2、HTTPS协议，SSL协议及完整交互过程

3、http1.1有哪些缺陷，我给转到回答http2.0的新特性，再扯上1.1做对比

1、多路复用：http2.0的一次连接可以传多个文件，
HTTP/1.* 一次请求-响应，建立一个连接，用完关闭；每一个请求都要建立一个连接；
HTTP/2多个请求可同时在一个连接上并行执行。

2、二进制分帧：1.1传的文本，帧更小，
3、首部压缩：减少网络请求（响应）报文大小
4、服务器推送：能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。
正因为没有发起请求，建立连接等操作，所以静态资源通过服务端推送的方式可以极大地提升速度。

4、cookie中的字段：

httponly: 禁止js访问cookie，一种安全手段
expires：设置cookie过期时间
path：指定cookie发送范围的文件目录， path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
domain：设置域名，一般设置二级域名，比如ye.com, 那么www.ye.com 和 www1.ye.com都可以发送cookie

5、sessionid如何产生？由谁产生？保存在哪里？

https://blog.csdn.net/qb170217/article/details/81482057
tomcat的ManagerBase类提供创建sessionid的方法：随机数+时间+jvmid；
tomcat的session的id值生成的机制是一个随机数加时间加上jvm的id值，jvm的id值会根据服务器的硬件信息计算得来，因此不同jvm的id值都是唯一的
session存放在哪里：服务器端的内存中。不过session可以通过特殊的方式做持久化管理（文件，数据库redis）。

6、四种常见的 POST 提交数据方式对应的content-type取值

enctype（encode Type）属性规定在发送到服务器之前应该如何对表单数据进行编码。
取值包括：application/x-www-form-urlencoded、multipart/form-data、text/plain
【application/x-www-form-urlencoded】是默认的类型，浏览器会把表单中发送的数据编码为“名称/值”对的形式

1、原始from表单，不设置enctype（默认）：application/x-www-form-urlencoded 
2、form表单设置enctype属性：:multipart/form-data  （不对字符编码，一般用于上传文件）
    <form action="form_action.asp" enctype="multipart/form-data">
    </form>
1,2是浏览器原生支持！

3、application/json  ：消息主体是序列化后的 JSON 字符串
4、text/xml ：但我没用过， xml结构过于臃肿，一般场景前三种就可以

请求的时候可以不用设置content-type，body里面设置的正确的数据类型，浏览器会识别，并修改content-type。

fetch('url', {
    method: 'POST',
    body: {
        xxx:xxx,
    },
})

浏览器会自动将content-type改成application/json,

7、响应content-Type为json，浏览器是怎么处理？

所以如果返回的是 json 格式，那么用两者都是可以的。

1、服务端 向 客户端 发送 JSON数据 时: 
Content-Type = 'application/json;charset=UTF-8' 
json 格式是 js 代码的一个子集，也会被浏览器的js引擎执行，而生成 json 对象。

2、服务端 向 客户端 发送 JS 代码 时: 
Content-Type = 'text/javascript;charset=UTF-8' 
返回的 js 代码，会自动在 浏览器中进行执行，就像返回的结果被 eval(result) 调用了一样。
也就是说返回的字符串，会被当做 js 代码，被浏览器的js引擎进行执行。而不是当做普通的字符串显示在浏览器中。

8、option请求用途

用来检查服务器的性能：CORS中的预检请求

9、xss和csrf （类型和防御）

1、防止xss获取cookie方法：设置httpOnly

10、状态码

状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。临时响应
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。

常见状态码：
200（成功）：服务器已成功处理了请求。
204（无内容）：服务器成功处理了请求，但没有返回任何内容。
206 ：只返回部分内容

301永久性重定向：新网址完全继承旧网址，旧网址的排名等完全清零
302临时性重定向：对旧网址没有影响，但新网址不会有排名
301、302区别：

例如：我们之前网站的域名是 a.com，现在替换成了 b.com。但是用户并不知道域名改了，所以还是在浏览器里输入
a.com，Web服务器（apache 或者 ngnix）在收到请求后，在响应中包含：状态码 301 及 b.com。用户的浏览器在收到响应后，自动将输入栏网址改变为 b.com。或者状态码 302 及 b.com。用户的浏览器在收到响应后，输入栏仍是显示旧网址，但是显示的是 b.com的内容。
301重定向是网页更改地址后对搜索引擎友好的最好方法，只要不是暂时搬移的情况，都建议使用301来做转址。

304（未修改）：服务器资源没有发生改变，浏览器上的已经是最新的，从浏览器缓存中读取资源。

400（错误请求）：请求报文存在语法错误，服务器不理解请求的语法。
401（未授权）：请求缺少http身份验证。对于登录后请求的网页，服务器可能返回此响应。这表示请求需要authorization字段。
403 （禁止）：服务器端理解请求但是拒绝处理，可以理解成客户端无权限访问。
404（未找到）：找不到资源

500（服务器内部错误）
503（服务不可用）：服务器目前无法使用（由于超载或停机维护

11、HTTP和HTTPS的区别

1、端口：HTTP 80端口、HTTPS 443端口
2、HTTPS需要到CA获得证书，大部分证书都是收费的。HTTP不需要证书
3、HTTPS是基于SSL和TLS，而SSL和TLS是运行在TCP上的，HTTPs的数据是加密的；HTTP是运行在TCP上，数据都是明文传输。

12、HTTP2.0

1、多路复用：
在一个连接上多个请求并行执行

2、服务器推送：
就是服务器可以对一个客户端请求发送多个响应。服务器向客户端推送资源无需客户端明确的请求。
传统请求index.html以及其中的style.css、example.png，需要发三次请求。
但服务器推送的话，浏览器只请求了index.html，但是服务器把index.html、style.css、example.png全部发送给浏览器。这样的话，只需要一轮 HTTP 通信，浏览器就得到了全部资源，提高了性能。

服务器推送有一个很麻烦的问题。所要推送的资源文件，如果浏览器已经有缓存，推送就是浪费带宽。即使推送的文件版本更新，浏览器也会优先使用本地缓存。
一种解决办法是，只对第一次访问的用户开启服务器推送。

3、二进制分帧（使用二进制而非文本）
HTTP2实现低延迟高吞吐量，关键之一就是在应用层（HTTP）和传输层（TCP）之间增加一个二进制分帧层。把传输消息分割成更小的帧。把HTTP1.X中的首部信息header封装到Headers帧中，而request body将被封装到Data帧中。
帧是乱序发送的，根据每个帧首部的流标志进行组装

4、首部压缩
HTTP1.x每次通讯（请求或响应）都会携带首部信息用于描述资源属性。而HTTP2.0在客户端和服务端之间使用首部表来跟踪和存储之前发送的键值对。
对于相同的数据，不再重新通过每次请求和响应发送。每个新的首部键值对要么追加到当前表的末尾，要么替换表中之前的值。首部表在HTTP2.0的链接存续期内始终存在，由客户端和服务端共同渐进的更新。

5、请求优先级
每个流都可以带有一个31bit的优先值：0表示最高优先级，2^31-1表示最低优先级。
客户端明确指定优先级，服务端可以根据这个优先级作为交互数据的依据，比如客户端优先设置为.css>.js>.jpg。服务端按此顺序返回结果既节省了时间，又提高用户体验。

6、流量控制

11、sql注入

用户名： ‘or 1 = 1 –—
密码：
这样到sql中就是 username='' and --后面是注释

解决方法：

	1、检查变量数据类型和格式
	2、过滤特殊符号
	3、sql预编译 ：像java中的PreparedStatement
		connection conn = this.getconnection();
		string strsql = "select emp_id from employee where emp_id = ?";
		preparedstatement pstmt = conn.preparestatement(strsql);
		pstmt.setstring(1,"pma42628m"); // 从1开始
		resultset rs = pstmt.executequery();

一条大河全靠浪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试问题 —— 网络

1、什么是同源策略，解决跨域？CORS 过程中的字段，整个过程说一下。同源策略同源：域名、端口、协议都一样当端口、协议、域名（即使与域名对应的ip）等任意一个不同，就构成跨域。http://www.servicea.com/first.dohttp://10.28.10.13/first.do域名和其对应的ip，这也是跨域解决跨域JSONP ：动态添加<scri...
复制链接

扫一扫