本帖最后由 openbilibili 于 2024-7-20 00:19 编辑
省流：一点拙见。一些前端教程，如需后端接口有几种情况出现。如果你的资源来自非官方，接口对于你来说可能是个非常头疼的问题。
1. 授课方提供。一般以下的几种场景。
a. 往请求头加东西，比如id或者secret，token；
评价：这种方案相对较多，因为基于中间件的请求头校验相对比较简单，无非就是请求的时候查询缓存的信息是否合法，比如加密过后的数据，通过解密token是否为合法ID。
b. 通过sdk配置config，鉴权之后再给你提供服务；
评价：这种一般来说不太可能，除非他的接口并发量很大，需要一个网关校验，没有见到过。
c. 其他的常规鉴权手段，比如OAuth, OAuth2.0;
评价：这种几乎更少。
2. 公共接口+公共服务进行组装。
评价：比如，一些天气接口，申请就能使用。
3. 全栈体系课。
评价：各种从0到1系列，基本上国外你弄不到的服务找国内平替就行。
4. mock接口。
评价：没有办法的办法。
那么这次以某课的打造前台+中台的课程接口为例，来复盘当时的思路。这个课程也出了相对一段时间，我在之前在刚看到课程的示例网站，花了半个小时不到就找到了固定的破解方法。
1. 看看课程使用的前端技术栈
课程详情描述的技术栈
省流：Vue.js+Vite+axios
2. 查看官网，打开调试工具。(基操)
为了防止被追责，一些隐私的东西我会打码，如有需要可以自己去搜索该课程。
其中一个接口展示：
[Bash shell] 纯文本查看 复制代码 GET: /prod-api/pexels/list?page=1&size=20&categoryId=&searchText=
其中一个list
省流：里面有个Icode不是常规的请求头，把他的值复制到index.js中查看。
3. 基于index.js的代码，依靠Vite的打包思路，Axios在项目中的一些配置方案，来分析加密手段。
首先，我们已经能拿到Icode的值，我们找到script module的主入口。
主入口
搜索关键字。
根据Icode关键字搜索
我们根据前端开发的经验，我们推测这个是axios的拦截器配置。
4. 创建一个Vite的前端项目去验证一手。
pnpm create vite test-frontend --tempate vue && cd test-frontend && pnpm install axios
结论：好像这一个版本，他其实已经删掉了加密的部分，直接使用就行了，我给大家展示之前的还有加密的部分。
这个地方他是一个动态获取时间，以及根据常量经过md5加密，然后赋值给header的Icode和time中，通过axios的interceptor来配置。[JavaScript] 纯文本查看 复制代码 function F0() {
const e = parseInt(Date.now() / 1e3),
t = e + 'LGD_Sunday-1991-12-30'
return {
icode: md5(t),
time: e
}
}
旧版的代码
如何判断是md5？根据打包中的内容，分析出他运用了这一段代码，可以把一些关键词丢到GitHub中去搜索。
md在打包中的
我们可以把代码中的版权部分代码，丢到GitHub中搜索，就可以找到他的加密方案。
[JavaScript] 纯文本查看 复制代码 /*!
* Determine if an object is a Buffer
*
* @AuThor Feross Aboukhadijeh <https://feross.org>
* @license MIT
*/
开发时候的请求接口，完全没有问题。（状态码，请求头，响应体）
项目运行时候的请求接口
请求头内容
响应体
基于Vite的plugin配置，进行模拟接口。
大致思路，我们可以去找到云谦手写过的一个toy-vite，去了解大概的vite原理。
就是通过浏览器的module特性，根据路由去拿到文件内容，相对应的进行编译再返回。
所以，本质上vite开发环境就是启动一个服务，基于connect中间件的。
所以，我们可以通过基于connect的中间件，去配置json，来模拟开发环境的接口。
具体的细节，可以查看vite的文档，或者社区优秀的实现。
总结：其实看下来没什么内容，我在复盘的时候发现这个东西两三年过去了，接口已经改了，其实写教程已经没啥意义了，就当是给大伙图个乐啥的。 | 
[复制链接]
发表于 2024-7-11 20:34
|
发表于 2024-7-20 00:15
