NodeJS全栈开发面试题讲解——P4前后端协作与接口设计

4.1 RESTful API 的设计规范有哪些?常见状态码有哪些?

面试官您好,RESTful API 强调“资源”的概念,通过 URL 和 HTTP 动词组合操作资源。以下是我总结的规范:


📌 RESTful 设计规范:

项目设计建议
URL 命名使用名词复数:/users, /posts
动词通过方法表达使用 HTTP 动词表达操作行为,如 GET 查询,POST 创建
状态无关性每个请求都要自包含,不能依赖上一次请求状态
资源嵌套GET /users/:id/posts 表示某个用户的所有文章
版本控制建议加 /v1/ 进行接口版本隔离


🧾 常见状态码(建议熟背):

状态码含义
200OK,请求成功
201Created,资源创建成功
204No Content,无返回体
400Bad Request,请求参数错误
401Unauthorized,未认证
403Forbidden,无权限访问
404Not Found,资源不存在
500Internal Server Error


4.2 CORS 原理?如何处理跨域问题?

面试官,其实 CORS 的本质是浏览器为了安全限制不同源之间的 JS 访问资源行为。服务端通过设置响应头来告诉浏览器“允许跨域”。


🌐 CORS 原理简述:

  • 浏览器发起跨域请求时,会先发送 预检请求(OPTIONS)

  • 服务端需返回如下头部:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

🔧 如何处理跨域?

Express 中:
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));
NestJS 中:
app.enableCors({
  origin: 'http://localhost:3000',
  credentials: true
});
其他方式(了解加分):
方法是否推荐原理简述
JSONP只能 GET,非标准方式
Nginx 反向代理同源请求避免跨域限制
CORS 标准协议✅✅推荐,现代浏览器通用方法


4.3 前端如何处理 token 过期?服务端如何刷新 token?

在生产项目中,我们通常使用 JWT + Refresh Token 双 token 机制。前端检测到 token 过期,就通过刷新接口获取新的 token。


🧩 前端处理策略:

  1. JWT 过期后,调用 /auth/refresh 接口获取新 token;

  2. 请求失败时统一拦截(Axios 拦截器);

  3. 刷新成功后重试原请求。

axios.interceptors.response.use(undefined, async error => {
  if (error.response.status === 401) {
    const newToken = await refreshToken();
    // 更新 token 重试原请求
  }
});

🛡 服务端刷新流程:

1. 登录成功后下发 Access Token + Refresh Token(存 HttpOnly Cookie)
2. 客户端每次携带 Access Token
3. 若 Access Token 过期,调用 refresh 接口,服务端验证 Refresh Token
4. 若合法,颁发新的 Access Token

Refresh Token 通常设置较长有效期,并存储于数据库或 Redis 中,用于回收与吊销。


4.4 如何设计一个登录注册流程?包括验证码、加密、Token

这是经典综合题,我从注册、验证码、加密、登录鉴权四个步骤讲解:


🟩 注册流程:

  1. 用户填写信息(手机号 / 邮箱)

  2. 服务端发送验证码(短信 / 邮件),并存入 Redis

  3. 用户填写验证码,服务端验证

  4. 对密码加密(bcrypt),写入数据库

const hash = await bcrypt.hash(password, 10);
await userRepository.save({ username, password: hash });

🟨 登录流程:

  1. 用户提交账号密码

  2. 验证账号是否存在

  3. 使用 bcrypt.compare() 验证密码

  4. 登录成功后签发 JWT,返回前端:

const token = jwt.sign({ uid: user.id }, 'secret', { expiresIn: '1h' });


🔐 加密方式:

类型用途
bcrypt密码加密(单向)
AES对称加密
RSA非对称加密


🔁 Token 存储建议:

  • Access Token 存 localStorage / sessionStorage

  • Refresh Token 建议存在 HttpOnly Cookie,防止 XSS 攻击


4.5 前后端接口联调过程中常见问题和解决方式?

在我实际开发中,经常遇到接口联调过程中的各种问题。下面列出几个典型场景和我的处理经验:


🔍 常见问题 & 解决方案:

问题类型描述解决方式
❌ 跨域问题浏览器拦截,OPTIONS 请求失败服务端设置 Access-Control-* 头部
❌ 参数格式错误前端传 JSON,后端解析失败确保 Content-Type 一致
❌ 鉴权失败Token 丢失、过期、签名无效设置 Axios 全局请求头 + 统一刷新处理
❌ 状态码不规范返回 200,但实际是失败后端规范状态码,并用 code + msg 返回
❌ Mock 与接口不一致Mock 返回结构与实际接口不同与后端同步接口文档,统一 OpenAPI 规范


🧰 建议工具:

  • 使用 Postman / Swagger 文档进行调试

  • 使用 TypeScript 共享类型定义

  • 使用 Mock 服务(如 Mock Service Worker)提前模拟数据


✅ 总结:

问题编号涉及知识点
4.1RESTful 设计、状态码规范
4.2跨域原理、服务端 CORS 设置
4.3Token 过期检测、刷新机制
4.4登录注册流程、验证码、加密与鉴权
4.5联调常见问题排查与实践经验


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穗余

家庭条件困难,望有打赏援助生活

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值