前后端一点小事

发表于

最近在做一个前后端一个人写的工作。

前端react 后端express

遇到点问题，解决了。来总结下

记一次前后端跨域事件

  1. 前端是react。后端是express。
  2. 由于前后端部署在不同的端口号上， 前端是localhost:3001, 后端是localhost:3000. 由于浏览器的同源策略，自然因跨域而无法访问。
  3. 所以后端要做如下设置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 允许跨域, 调试
    app.all("*", function (req, res, next) {
      // 指定允许请求的源
      res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
      // 允许request请求时附带的header字段。
      res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
      // 允许前端请求的方法
      res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
      // 继续执行请求
      next();
    });

然后前端就可以正常的访问数据了。

记一次前后端cookie事件

明确一个概念：

  1. 先cookie是和域名绑定在一起的，你在前端设置的cookie你可以在chrome的application的cookies中可以查看。但是在这里看不到后端的cookie的。
  2. 还有前端的如果存在并且可以传递cookie的话，那么前端传cookie到后端的这个过程是浏览器默认执行的。不需要我们自己去添加cookie到request的header中。

开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
首先说下默认情况下，即前后端正常请求不配置额外配置。
如后端设置Access-Control-Allow-Credentials字段或者前端设置Credentials=true。
那么前后端是无法传递cookie的。因为默认情况下，Cookie不包括在CORS请求之中。
后端设置 res.header("Access-Control-Allow-Credentials", "true"); 
这样后端才可以把cookie作为响应response中的headers中的Set-Cookie的值，一起response给前端。

你可以通过network网络请求中可以在响应头中看到set-cookie的值（就是后端set-cookie的值）
但是你以为这样前端就可以获取到Set-Cookie的值了吗？
不，

你可能觉得既然在响应头中都有Set-Cookie字段和他的值了。我们直接response.headers.cookieKey不就可以获取到cookie的值了吗？
不可以。

你会发现response.headers就没有这个Set-Cookie这个key值。
哈哈哈，很迷。

那既然这样不行。我们直接到我们前端应用的域名下找找cookie吧。 document.cookie中找找看，有没有后端返回的cookie。
答案：没有

为什么没有？
因为我们在前端请求的时候，没有设置Credentials的值为true，同理在axios中是设置withCredentials: true。
这个值是表示前端可以接收后端的cookie。
同时在我前端请求后端的时候，会自动把前端域名下的所有cookie都作为http的request的header的cookie字段传递给后端。
这样在后端直接用req.headers.cookie获取到前端域名下的所有cookie值了。

这样你就可以把一些登录的token校验放在cookie中了。

1
2
3
4
还有一种登录校验token的办法是：
自定义登录校验所放的位置。不放在cookie中。直接在header头中定义两个字段 mfe-token, user-id
但是header头中定义字段，要在后端做设置。否则后端收不到。
后端设置如下：

// 允许前端请求时附带的header的字段。
res.header(“Access-Control-Allow-Headers”, “Content-Type, Content-Length, Authorization, Accept, X-Requested-With, mfe-token, user-id”);
// 向前端暴露其可以访问的响应头的字段，即前端可以访问后端响应头中的字段。
res.header(‘Access-Control-Expose-Headers’, ‘mfe-token, user-id’);

然后前端登录请求后端。后端判断登录成功后。
在response头中添加这两个字段
res.setHeader(“mfe-token”, token);
res.setHeader(‘user-id’, id);

前端收到响应后。可以直接resposne.headers[‘mfe-token]和response.headers[‘user-id’]获取到他们的值。
然后可以把值存储到前端的cookie中或者storage中。

然后前端可以添加http请求拦截。每次请求时拦截该请求。从前端域名的cookie中取出mfe-token, user-id的值。
插入到该次请求的headers中。用于后端接口校验，即是否能够访问该接口。

然后在前端也可以添加对后端的响应拦截，判断响应码(如：没有权限或者没登录就访问该接口),就在响应拦截中进行提示或者跳转到login界面。

当然了。前端也可以在路由时。如果某个路由需要登录才能访问，则可以从前端域名的cookie中取出mfe-token, user-id的值。
进行判断是否已经登录，如未登录，则跳转到login界面。
`