如何解决一些前端教程的接口问题(以某课的前端课程为例，对接口分析并运用于项目)
本帖最后由 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接口。
评价：没有办法的办法。
那么这次以某课的打造前台+中台的课程接口为例，来复盘当时的思路。这个课程也出了相对一段时间，我在之前在刚看到课程的示例网站，花了半个小时不到就找到了固定的破解方法。
https://static.52pojie.cn/static/image/hrline/4.gifhttps://static.52pojie.cn/static/image/hrline/4.gifhttps://static.52pojie.cn/static/image/hrline/4.gif
1. 看看课程使用的前端技术栈
省流：Vue.js+Vite+axios
2. 查看官网，打开调试工具。(基操)
为了防止被追责，一些隐私的东西我会打码，如有需要可以自己去搜索该课程。
其中一个接口展示：
GET: /prod-api/pexels/list?page=1&size=20&categoryId=&searchText=
省流：里面有个Icode不是常规的请求头，把他的值复制到index.js中查看。
3. 基于index.js的代码，依靠Vite的打包思路，Axios在项目中的一些配置方案，来分析加密手段。
首先，我们已经能拿到Icode的值，我们找到script module的主入口。
搜索关键字。
我们根据前端开发的经验，我们推测这个是axios的拦截器配置。
4. 创建一个Vite的前端项目去验证一手。
pnpm create vite test-frontend --tempate vue && cd test-frontend && pnpm install axios
结论：好像这一个版本，他其实已经删掉了加密的部分，直接使用就行了，我给大家展示之前的还有加密的部分。
这个地方他是一个动态获取时间，以及根据常量经过md5加密，然后赋值给header的Icode和time中，通过axios的interceptor来配置。function F0() {
const e = parseInt(Date.now() / 1e3),
t = e + 'LGD_Sunday-1991-12-30'
return {
icode: md5(t),
time: e
}
}
如何判断是md5？根据打包中的内容，分析出他运用了这一段代码，可以把一些关键词丢到GitHub中去搜索。
我们可以把代码中的版权部分代码，丢到GitHub中搜索，就可以找到他的加密方案。
/*!
* Determine if an object is a Buffer
*
* @AuThor Feross Aboukhadijeh <https://feross.org>
* @licenseMIT
*/
开发时候的请求接口，完全没有问题。（状态码，请求头，响应体）
基于Vite的plugin配置，进行模拟接口。
大致思路，我们可以去找到云谦手写过的一个toy-vite，去了解大概的vite原理。
就是通过浏览器的module特性，根据路由去拿到文件内容，相对应的进行编译再返回。
所以，本质上vite开发环境就是启动一个服务，基于connect中间件的。
所以，我们可以通过基于connect的中间件，去配置json，来模拟开发环境的接口。
具体的细节，可以查看vite的文档，或者社区优秀的实现。
总结：其实看下来没什么内容，我在复盘的时候发现这个东西两三年过去了，接口已经改了，其实写教程已经没啥意义了，就当是给大伙图个乐啥的。 所以是逆向解析吗 ll8961 发表于 2024-7-15 16:56
https://www.epai.shop/index.html
这个网站返回值，包括传参都加密了，这种能破解吗？
我只看了一个，我口述一下方法，具体复杂的可能要查浏览器的一些工具，比如debugger，查询哪里使用了代码。
我以homeInfo为例，网络模块有个启动器，启动器最底下有个匿名函数，你点进去开始debug。
我找到的是这一串解密代码。但我还没来得及验证。
if (1 == n.isKey) {
var i = s.default.HymanEdgeworth(n.data, null, n.timestamp);
e.data.data = JSON.parse(i),
n.data = JSON.parse(i)
} 感谢分享 虽然看不懂，还是要支持一下！ 支持,很有实力的 这是真大佬，已学习，感谢 legendweb 发表于 2024-7-12 00:04
所以是逆向解析吗
之前算吧，因为他之前的某个请求头字段是通过加密去弄的，但是我最近看的时候，他把那个东西删掉了。所以，还是得看时间吧，因为我最近看的时候已经删掉了。不过，主题更偏向的是，如何在前端课程，遇到接口加密的请求，如何尝试分析。 gx感谢分享。。。。 感谢你的努力 必有回报 前端加密不都是图一乐吗
页:
[1]
2