前后端联调

网关

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

---

http状态码

3xx：重定向
301：永久重定向
302：临时重定向
304：重定向到浏览器本身，即使用浏览器缓存

4xx：客户端问题
401：多数情况是没带token，未经授权
403：带了token，但是该角色不允许访问
404：前端地址写错了，或者地址中参数写错了，又或者后端给错了

5xx：服务端问题
500：后端代码问题
502：网关本省出了故障
504：网关超时（其实还是服务api超时）
503：服务器问题，服务器过载了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

http缓存

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

强缓存（新鲜度）（一般设置过期时长）
第一次请求---
    服务器设置响应头：
    Cache-Control  max-age:31536000(s)
    浏览器会缓存下文件

下一次请求相同资源---
    浏览器会检查max-age有没有过期
    若没过期，从缓存中拿资源（此时状态码为200）
    若过期，重新请求
1
2
3
4
5
6
7
8
9
10

• 协商缓存（对比缓存）

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

• 协商缓存中资源标识

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

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

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

• 缓存策略

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

---

post参数约定

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

Content-Type的四种格式：
application/x-www-form-urlencoded(表单类型的数据)
application/json
multipart/form-data（表单类型的数据）
text/xml

1、Request Payload（json类型参数）
需要前端的处理：前端设置请求头、 json序列化（js数据变成json格式的数据）
    Content-Type: application/json
    JSON.stringfy(obj)    eg:	  {"key":"value", "key": "value"}

2、Form Data（form类型参数）
需要前端处理：前端设置请求头、参数序列化
    Content-Type: application/x-www-url-encode
    qs.stringfy(obj)    eg:	key=value&key=value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

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

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

---

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20