前端面试-Http篇

Http篇章

同源策略

同源策略是浏览器的安全策略，用来阻止origin文档或者它加载的脚本与另外的源的资源进行交互。可以阻挡恶意文档，减少被攻击的路径。
一个域名地址的组成

例：http:// www.bai.com:8045/aa.html

1. http:// 协议
2. www 子域名
3. bai.com 主域名
4. 8045 端口号
5. aa.html 请求资源地址

同源策略是一种约定，web是构建在这基础之上的，浏览器只是它的一种实现。

同源策略是浏览器的行为，为了保护本地数据不被请求回来的数据污染，拦截的是请求回来的请求数据，服务器响应了数据，但是被 同源策略拦截

跨域

同源策略出于安全考虑，限制了一下行为：Cookie，loacalStory，IndexDB 无法读取，Dom和JS对象无法读取，ajax请求发不出去

<img src="XXX"/>
<script src="XXX"/>
<link href="XXX"/>

这三个标签允许跨域加载资源
触发跨域： 非同源请求，服务端设置cors限制

提示：
跨域不是请求发不出去，是请求发出去了，服务端能正常收到请求并返回响应结果，只是结果被浏览器拦截了。
表单方式可以发送跨域请求是因为它不会获取新的内容，所以他可以发送请求，这也说明了跨域并不能完全阻止CSRF（也叫csrf，跨站请求伪造，是一种挟制用户在已登录的web应用程序上执行非本意的操作的攻击方法），因为阻止的只是响应消息。

解决跨域：

1. 通过JSONP跨域 （仅支持get方法具有局限性，不安全可能会遭受XSS攻击（恶意代码注入））

	$.ajax({
	url:'http://myapp.com/jsonServerResponse',
	dataType:'jsonp',
	type:'get',  //可以省略
	jsonCallback:'show',   //自定义传送给服务器的函数名，而不是使用jQuery自动生成的，可忽略
	jsonp:'callback',  //把传递函数名的形参设定，可忽略。
	sucess:function(data){
	console.log(data)
	}

2. CORS解决跨域
   cors需要浏览器和后端同时支持，IE8和IE9 需要通过XDomainRequest来实现
   服务端需要设置 Access-Control-Allow-Orign就可以开启CORS，该属性表示那些域名可以访问资源，如果设置通配符，即所有的都可访问。
   虽然设置CORS和前端没有什么关系，但是通过这种方式会出现两种情况，分别是简单请求和复杂请求
   （1）、简单请求
   只要同时满足以下两大条件，就属于简单请求
   条件1： 使用下列方法之一： GET/HEAD/POST
   条件2：Content-type的值仅限于下面三者之一：text/pain, multipart/form-data, application/x-www-from-urlencode
   (2)、 复杂请求
   不属于简单请求即是复杂请求，复杂请求的CORS设置，会在正式通信之前，增加一次HTTP查询请求，成为预检请求，该请求是option的，通过该请求来知道服务端是否允许跨域请求。
   withCredentials： CORS请求默认不发送cookie和HTTP认证信息，如果要把Cookie发到服务器，一方面需要服务器的同意，指定Access-Control-Allow-Credentials 字段设置为true，另外一方面，开发者需要在AJAX请求中打开withCredentials属性
3. 代理
   ngnix配置

		server{
		    # 监听9099端口
		    listen 9099;
		    # 域名是localhost
		    server_name localhost;
		    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
		    location ^~ /api {
		        proxy_pass http://localhost:9871;
		    }    

常用状态码

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

常见状态码

200 OK：客户端请求成功。
301：永久转移，如换域名时常使用，用户访问老域名时自动跳转到新域名
302：资源暂时转移，很多短链接跳转长链接，都是使用302

400 Bad Request：客户端请求有语法错误，未被服务端理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器接收到请求，但拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。大部分后端业务代码出现异常
502 Bad Gateway 网关错误：ngnix收到请求，但请求没打过去，可能因为业务服务挂了，或者打过去的端口号写错了
503 Server Unavailable：服务器当前不能处理客户端请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。
504 Gateway Timeout 网关超时 ： 通常因为服务器处理太久，导致超时，如PHP服务默认的请求响应最长时间是30s，如果超过就会挂掉

经典面试题：从输入url到页面加载完成发生了什么

1. 浏览器的地址栏输入url并按下回车
2. 浏览器查找当前URL的缓存记录
3. DNS解析当前域名到IP
4. 根据IP建立TCP连接（三次握手）
5. Http发起请求
6. 服务端接受请求并返回响应结果，浏览器接受HTTP响应
7. 渲染页面，构建DOM树
8. 关闭TCP连接（4次握手）

浏览器缓存

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求分类，分为强制缓存，对比缓存

强制缓存判断HTTP首部字段：cache-control，Expires
Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致，因此该字段很少使用
cache-control中的max-age保存一个相对时间。例如Cache-control：max-age=484200，表示浏览器收到文件后，缓存484200内均有效。如果同时存在cache-control和Expries，浏览器总是优先使用cache-control

对比缓存通过HTTP的last-modified，Etag进行判断
last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新时间。下次浏览器请求资源时就发送if-modified-since字段，服务器用本地Last-modifed时间与if-modified-since时间对较，如果不一致则认为缓存已过期并返回新的资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存
Etag： 资源的实体体积（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304