前后端联调

网关

• 网关作用（认证授权、流量控制、路由转发等）
• 网关如何工作（类似前端的路由守卫，访问服务前都经过网关）

---

http状态码

3xx：重定向
301：永久重定向
302：临时重定向
304：重定向到浏览器本身，即使用浏览器缓存4xx：客户端问题
401：多数情况是没带token，未经授权
403：带了token，但是该角色不允许访问
404：前端地址写错了，或者地址中参数写错了，又或者后端给错了5xx：服务端问题
500：后端代码问题
502：网关本省出了故障
504：网关超时（其实还是服务api超时）
503：服务器问题，服务器过载了

---

http缓存

• http缓存在哪里设置（服务代码设置响应头）
• 强制缓存

强缓存（新鲜度）（一般设置过期时长）
第一次请求---服务器设置响应头：Cache-Control  max-age:31536000(s)浏览器会缓存下文件下一次请求相同资源---浏览器会检查max-age有没有过期若没过期，从缓存中拿资源（此时状态码为200）若过期，重新请求

• 协商缓存（对比缓存）

协商缓存是服务器端缓存策略
第一次请求---服务器返回资源和资源标识浏览器讲资源存到本地缓存中
下一次请求相同资源---请求时携带资源标识服务器判断版本是否一致若一致，使用缓存资源（304）若不一致，重新请求，返回新的资源和新的资源标识（200）

• 协商缓存中资源标识

ETag（优先于Last-Modified）请求头中携带的资源标识用的key为If-None-Match
Last-Modified请求头中携带的资源标识用的key为If-Modified-Since

• f5刷新与缓存的禁用情况

f5刷新是暂时禁用强缓存
清空缓存并硬性重新加载   暂时禁用所有缓存策略，请求一定会到服务器

• 缓存策略

不同类型的站点有不同的策略，一般通用的做法如下：
html文件    ----协商缓存
html文件中引用的js、css、png    ---强缓存，并设置一年的有效期
商品购物类API   ---不用缓存
其他API   ---强缓存或者协商缓存

---

post参数约定

如果前端传递的是json类型参数，后端是去解析的json；如果前端传递的是form类型的参数，后端就需要去分割字符串解析

Content-Type的四种格式：
application/x-www-form-urlencoded(表单类型的数据)
application/json
multipart/form-data（表单类型的数据）
text/xml1、Request Payload（json类型参数）
需要前端的处理：前端设置请求头、 json序列化（js数据变成json格式的数据）Content-Type: application/jsonJSON.stringfy(obj)    eg:	  {"key":"value", "key": "value"}2、Form Data（form类型参数）
需要前端处理：前端设置请求头、参数序列化Content-Type: application/x-www-url-encodeqs.stringfy(obj)    eg:	key=value&key=value

---

前端设置请求头（为安全着想的做法）

xhr.setRequestHeader('abc', 'jsdoi7938798oas97')

---

url中的编码

encodeURI解析范围不包含如下字符：; , / ? : & = + $- _ . ! ~ * ' ( ) 字母 数字
使用场景：如果URL中的查询参数没有特殊字符，可用于转码整个带中文参数的URL查询参数中刚好有? = &不被解析转化前： location.href = "http://localhost:8080/pro?a=1&b=张三&c=aaa";转化后： location.href = "http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa"encodeURIComponent解析范围不包含如下字符：- _ . ! ~ * ' ( ) 字母 数字
使用场景：用于参数的传递，参数包含特殊字符可能会造成间断。比如：var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";var url = "http://localhost:8080/pp?a=1&b="+ paramUrl ;应该使用encodeURIComponent(paramUrl)进行转码，结果：http://localhost:8080/pp?            a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3