4 • 骚男 • 1小时前 • 128次点击
暗战今天不是开服了吗?登陆他们所谓的网页版瞅了瞅,昨天就看了一眼。整个交互逻辑就是原生的交互逻辑,只不过是在网页端实现的,今天就进游戏玩了一把,发现那不就是原生的交互逻辑吗?只不过是网页版,音效做的也是一言难尽的,有一种我在玩文字页游的感觉,回头看看能不能做个原生客户端给他跑起来,不想用网页这破玩意儿
哎,有这闲功夫,我还是做我的游戏吧,继续,这游戏也真是。
直接抓着他的地址DDOS不知他能不能挡下来。hhhh
真服了背景音乐的声音比*还大怎么听战报。还有这东西连自己的读 平就这还怎么玩?而且这背景音量还不能调。品都没有。
我用了点神力事故级评估报告:200 返回 HTML 的前端入口页
评估对象:第 1 次请求,HTTP 200,耗时 1000ms,响应体为 ...
总评:12/100,生产事故预备役。
一句话结论:如果这是接口响应,那是 P0 级事故;如果这是页面源码,那也是缝合怪。AI 不 AI 不是重点,重点是——路由、Nginx、前端工程、加载逻辑、监控体系,全线失守。
---
一、先定性:这不是“页面”,是事故现场
如果你请求的是 API,却拿到:
```html
...
```
那说明:你的接口请求打到了前端入口,SPA fallback 把 API 请求吃了。
HTTP 200 不是成功,是服务器在撒谎。
Content-Type 大概率是 text/html,不是 application/json。
前端如果直接 JSON.parse,当场爆炸;如果不炸,说明错误处理更烂。
这不是“接口慢”,这是“接口根本不存在,被前端页面截胡了”。
二、AI 不 AI?先别急着甩锅
这段 HTML 里确实有 AI 味:
· “基础环境配置与早期初始化”
· globalThis Polyfill
· 根据域名 includes 判断环境
· PerformanceObserver 做假进度条
· 语言标题早期设置
但下面这些不是 AI 手写的,是 Vite 构建产物:
以及这段现代浏览器检测:
```js
import.meta.url;import("_").catch(()=>1);(async function*(){})().next();window.__vite_is_modern_browser=true
这是 @vitejs/plugin-legacy 注入的。
所以准确说法是:Vite 构建产物 + AI 味初始化脚本 + 人肉硬编码配置,搅成一锅。
把锅全甩给 AI,属于找错债主。AI 只负责生成垃圾,人负责把垃圾送进生产。
三、罪状清单
P0 致命问题
1. API 请求被 SPA fallback 吞掉
典型 Nginx 配置:
```nginx
location / {
try_files $uri $uri/ /index.html;
}
如果 /api 没有优先匹配,所有未知路径都会回退到 index.html。
结果:接口 200,返回 HTML,前端爆炸,监控还以为成功。
修复:
location /api/ {
proxy_pass https://acct.api.mytingyou.com:18000;
/api/ 必须放在 / 前面。
更狠一点:SPA fallback 只对 Accept: text/html 生效。
2. 前端不校验 Content-Type
Axios 默认以为 JSON,结果拿到 HTML。
正确的做法是拦截器直接判:
if (!res.headers['content-type']?.includes('application/json')) {
throw new Error('API hit HTML, check Nginx/API base');
现在没有。所以 200 假成功能一路混到业务层。
3. API base 硬编码域名
if (hostname.includes('test.mytingyou.com')) {
baseApi = 'https://aisx02.test.mytingyou.com/api';
} else if (hostname.includes('appshubforvisuallyimpaired.com')) {
baseApi = 'https://acct.api.appshubforvisuallyimpaired.com:18000';
} else if (hostname.includes('mytingyou.com')) {
baseApi = 'https://acct.api.mytingyou.com:18000';
这是把环境配置写死在 HTML 里。
换域名、加环境、改端口,全得改代码重新构建。
正常应该用 import.meta.env.VITE_API_BASE_URL。
P1 严重问题
4. 假加载进度条,行为艺术
let totalResources = 0;
let loadedResources = 0;
问题一堆:
· PerformanceObserver 注册太晚,之前的资源统计不到。
· totalResources 分母乱变,进度从 0 跳到 100 再掉下来。
· 缓存资源 transferSize 可能为 0。
· 没有超时,没有失败处理。
· JS 挂了,页面永远“页面加载中”。
· 频繁 innerHTML,aria-live="polite",屏幕阅读器被“页面加载中 100%”反复精神污染。
· focus() 抢焦点,可访问性灾难。
这不是加载进度,这是演给领导看的。
5. 依赖臃肿,Vuex 和 Pinia 同时存在
预加载列表里:
· Vue
· Vue Router
· Vuex
· Pinia
· Element Plus
· lodash-es
· dayjs
· @vueuse
· @ctrl
· @popperjs
· async-validator
· clipboard
· ua-parser-js
· core-js
Vuex 和 Pinia 同时上?
两个状态管理库,像同时供两个皇帝,状态管理宫廷内斗。
Element Plus 大概率全量引入,首屏直接变慢。
lodash、dayjs、clipboard、ua-parser-js 全塞入口,包体积不炸才怪。
这不是 SPA,这是 Slow Page Application。
6. modulepreload 滥用
一口气预加载二十个 chunk。
浏览器像被塞了二十个外卖订单,一个都没吃完。
带宽竞争、瀑布加载、首屏白屏时间拉长。
1000ms 返回 HTML 只是开始,真正渲染可能更久。
7. 无错误边界、无监控、无降级
没有 Sentry,没有 Web Vitals,没有错误兜底。
接口返回 HTML,前端不知道;加载失败,用户不知道;
监控只看到 200,还以为一切正常。
8. CSP 不友好,内联脚本裸奔
大段内联
哎,有这闲功夫,我还是做我的游戏吧,继续,这游戏也真是。
直接抓着他的地址DDOS不知他能不能挡下来。hhhh
真服了背景音乐的声音比*还大怎么听战报。还有这东西连自己的读 平就这还怎么玩?而且这背景音量还不能调。品都没有。
我用了点神力事故级评估报告:200 返回 HTML 的前端入口页
评估对象:第 1 次请求,HTTP 200,耗时 1000ms,响应体为 ...
总评:12/100,生产事故预备役。
一句话结论:如果这是接口响应,那是 P0 级事故;如果这是页面源码,那也是缝合怪。AI 不 AI 不是重点,重点是——路由、Nginx、前端工程、加载逻辑、监控体系,全线失守。
---
一、先定性:这不是“页面”,是事故现场
如果你请求的是 API,却拿到:
```html
...
...
```
那说明:你的接口请求打到了前端入口,SPA fallback 把 API 请求吃了。
HTTP 200 不是成功,是服务器在撒谎。
Content-Type 大概率是 text/html,不是 application/json。
前端如果直接 JSON.parse,当场爆炸;如果不炸,说明错误处理更烂。
这不是“接口慢”,这是“接口根本不存在,被前端页面截胡了”。
---
二、AI 不 AI?先别急着甩锅
这段 HTML 里确实有 AI 味:
· “基础环境配置与早期初始化”
· globalThis Polyfill
· 根据域名 includes 判断环境
· PerformanceObserver 做假进度条
· 语言标题早期设置
但下面这些不是 AI 手写的,是 Vite 构建产物:
```html
```
以及这段现代浏览器检测:
```js
import.meta.url;import("_").catch(()=>1);(async function*(){})().next();window.__vite_is_modern_browser=true
```
这是 @vitejs/plugin-legacy 注入的。
所以准确说法是:Vite 构建产物 + AI 味初始化脚本 + 人肉硬编码配置,搅成一锅。
把锅全甩给 AI,属于找错债主。AI 只负责生成垃圾,人负责把垃圾送进生产。
---
三、罪状清单
P0 致命问题
1. API 请求被 SPA fallback 吞掉
典型 Nginx 配置:
```nginx
location / {
try_files $uri $uri/ /index.html;
}
```
如果 /api 没有优先匹配,所有未知路径都会回退到 index.html。
结果:接口 200,返回 HTML,前端爆炸,监控还以为成功。
修复:
```nginx
location /api/ {
proxy_pass https://acct.api.mytingyou.com:18000;
}
location / {
try_files $uri $uri/ /index.html;
}
```
/api/ 必须放在 / 前面。
更狠一点:SPA fallback 只对 Accept: text/html 生效。
2. 前端不校验 Content-Type
Axios 默认以为 JSON,结果拿到 HTML。
正确的做法是拦截器直接判:
```js
if (!res.headers['content-type']?.includes('application/json')) {
throw new Error('API hit HTML, check Nginx/API base');
}
```
现在没有。所以 200 假成功能一路混到业务层。
3. API base 硬编码域名
```js
if (hostname.includes('test.mytingyou.com')) {
baseApi = 'https://aisx02.test.mytingyou.com/api';
} else if (hostname.includes('appshubforvisuallyimpaired.com')) {
baseApi = 'https://acct.api.appshubforvisuallyimpaired.com:18000';
} else if (hostname.includes('mytingyou.com')) {
baseApi = 'https://acct.api.mytingyou.com:18000';
}
```
这是把环境配置写死在 HTML 里。
换域名、加环境、改端口,全得改代码重新构建。
正常应该用 import.meta.env.VITE_API_BASE_URL。
---
P1 严重问题
4. 假加载进度条,行为艺术
```js
let totalResources = 0;
let loadedResources = 0;
```
问题一堆:
· PerformanceObserver 注册太晚,之前的资源统计不到。
· totalResources 分母乱变,进度从 0 跳到 100 再掉下来。
· 缓存资源 transferSize 可能为 0。
· 没有超时,没有失败处理。
· JS 挂了,页面永远“页面加载中”。
· 频繁 innerHTML,aria-live="polite",屏幕阅读器被“页面加载中 100%”反复精神污染。
· focus() 抢焦点,可访问性灾难。
这不是加载进度,这是演给领导看的。
5. 依赖臃肿,Vuex 和 Pinia 同时存在
预加载列表里:
· Vue
· Vue Router
· Vuex
· Pinia
· Element Plus
· lodash-es
· dayjs
· @vueuse
· @ctrl
· @popperjs
· async-validator
· clipboard
· ua-parser-js
· core-js
Vuex 和 Pinia 同时上?
两个状态管理库,像同时供两个皇帝,状态管理宫廷内斗。
Element Plus 大概率全量引入,首屏直接变慢。
lodash、dayjs、clipboard、ua-parser-js 全塞入口,包体积不炸才怪。
这不是 SPA,这是 Slow Page Application。
6. modulepreload 滥用
一口气预加载二十个 chunk。
浏览器像被塞了二十个外卖订单,一个都没吃完。
带宽竞争、瀑布加载、首屏白屏时间拉长。
1000ms 返回 HTML 只是开始,真正渲染可能更久。
7. 无错误边界、无监控、无降级
没有 Sentry,没有 Web Vitals,没有错误兜底。
接口返回 HTML,前端不知道;加载失败,用户不知道;
监控只看到 200,还以为一切正常。
8. CSP 不友好,内联脚本裸奔
大段内联